I have some code as below:
<label class="control-label col-sm-4" for="datepicker">Date of Birth</label>
<div class="col-sm-8" ><input class="form-control col-sm-10" type="text" id="datepicker" name="datepicker" required="true" value="<?php if(isset($_SESSION['DOB'])) echo $_SESSION['DOB'] ?>"></div>
My issue is that I don't want this "Date of Birth" field to be a required field anymore. How do I set this field as unrequired?
I have tried setting required="false" but this does not work.
Any advice much appreciated, many thanks
Jean-Claude
The required attribute does not take the attribute value. It's just required="true", or required="required", or just setting the
<input type="text" required />
would make it required as well. Just unset the required attribute. If you're trying to unset it after some user action (with javascript) then use the
.removeAttribute("required") function.
<label class="control-label col-sm-4" for="datepicker">Date of Birth</label>
<div class="col-sm-8" ><input class="form-control col-sm-10" type="text" id="datepicker" name="datepicker" value="<?php if(isset($_SESSION['DOB'])) echo $_SESSION['DOB'] ?>"></div>
Avoid using required if you don't need them.
Also the attributes that are not necessary must be avoided.
Related
I'm typing to disable/avoid the autosuggest on specific field.
The html snippet is this:
<div class="form-group">
<h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
<input type="input" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off">
<span id='remainingC'></span>
<small class="form-text text-muted">You will identify your group of IDs by this name</small>
<div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>
note that I added the autocomplete='off' and yet, the browser still provide a suggestion.
Try to replace input type="input" with type="text"
it's not giving me error message when I input different pattern, what did I do wrong ?
<label for="receipt">Receipt number *</label>
<input name="receipt" id="receipt"
placeholder="re-nnnnnn" required="required"
pattern="^re\-\d{6}$" />
It depends on what you want to achieve. For example, if your goal is re-123456, you should remove the first back-slash.
<form action="">
<label for="receipt">Receipt number *</label>
<input name="receipt" id="receipt" placeholder="re-nnnnnn" required="required" pattern="^re-\d{6}$" />
</form>
I have an input type date in my from. If the value is already given by the user, it will be fetched from database. In firefox this works fine. But in Chrome and Opera the place holder 'dd-mm-yyyy' is shown. What is the problem?
<div class="form-group">
<label>Date of Birth</label>
<input value="<?php get("student","dob"); ?>" name="doj" type="date" class="form-control" placeholder="DD - MM - YYYY">
</div>
The resultant code in browser:
<div class="form-group">
<label>Date of Birth</label>
<input value="01-01-1970" name="dob" class="form-control" type="date">
</div>
But still place holder is shown instead of value. This is working in firefox.
<div class="form-group">
<label>Date of Birth</label>
<input value="2016-07-04" name="dob" class="form-control" type="date">
</div>
please refer to the value property here, your format is wrong
I've created a web FROM but Chrome autocomplete is populating the info in the wrong places. Chrome (Version 41.0.2272.89 (64-bit))
Despite both the input field AND the form field having the autocomplete="off" attribute, Chrome insists on showing a drop down history of previous entries for the field.
Sample From
<form accept-charset="UTF-8" action="/something" autocomplete="off" id="something_form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="authenticity_token" type="hidden" value="xxxxxxxxxxxx" />
</div>
<div class="form-group no-padding col-xs-12 col-sm-12 col-md-12 col-lg-12">
<label class="control-label col-xs-4 col-md-4 col-sm-4 col-lg-4 no-padding text-right" for="from-course-name">
Name:
</label>
<div class="controls col-xs-8 col-md-8 col-sm-8 col-lg-8 no-padding">
<div class="input-append">
<input id="from-name" inlineeditable-column="0" type="text" name="o_name" class="form-control custom-form_control required sensitive long " autocomplete="off" >
</div>
</div>
</div>
</form>
On the input fields that you want to stop from auto complete this will work. Make the fields read only and on focus remove that attribute like this
<input readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly');" id="from-name" type="text" name="o_name" class="form-control custom-form_control required ">
In Chrome autocomplete="off" only works for fields other then password, email, username, mobile, zipcode, city, ...
If the field's name or id is like id="blabla-password" or name"email-blabla" or id="bla-username-bla" etc... then you have to use the following
id="bla-bla-some-password" autocomplete="new-password"
id="bla-email-bla" autocomplete="new-email"
id="some-username-id" autocomplete="new-username"
name="bla-password" autocomplete="new-password"
name="bla-email-bla" autocomplete="new-email"
name="some-username-id" autocomplete="new-username"
...city autocomplete="nope"
...zipcode autocomplete="nope"
...mobile autocomplete="nope"
...
For all the other fields keep using autocomplete="off" !
It is still the best result
id="description" autocomplete="off"
id="date" autocomplete="off"
id="some-text" autocomplete="off"
...
And so on
Chrome has been ignoring autocomplete="off" for a while now, you have to trick chrome by doing the following: 1. Set the input type to text, and 2. reset the input type when on focus event is triggered
<input type="text" id="password" autocomplete="off" name="password">
$('#password').on('focus', function(){
$('#password').attr('type', 'password');
});
Reset done using Jquery
I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone