Does the select element have the required attribute? - html

Does the select element have the required attribute?

Yes you can use required attribute in HTML5. But remember, first value should be empty.
<select required>
<option value="">Please select</option>
<option value="first">First</option>
</select>
Here you get the more example:
http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

Yes it has a required attribute, you can use it as follows
<select required>
<option value="" disabled selected>Choose</option>
<option value="first Option">First Option</option>
<option value="Second Option">Second Option</option>
</select>
Reference :
HTML Select required Attribute (W3C)

You can do this way to make it look better
<select required>
<option hidden="" disabled="disabled" selected="selected" value="">Select subject</option>
<option value="first Option">First Option</option>
<option value="Second Option">Second Option</option>
</select>

Yes it does, but currently it is not supported by any version of all major browsers. This includes Safari, Chrome, Firefox, and IE.

It is possible but (just Arif said above) it is important (obviously) that you use the first option without value like:
<form action="#" method="post">
<div>
<label for="State">State</label>
<select required id="State" name="State">
<option value="">Choose</option>
<option value="new">New</option>
<option value="old">Old</option>
</select>
</div>
</form>
You can see more info at: http://www.maxdesign.com.au/2012/11/03/select-required/

Related

Select box validation is having problem after adding a required attribute

I got a problem when I'm validating this. I can't understand how do I fix it?
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled>Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Here is the problem I'm getting on https://validator.w3.org/nu :
The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.
The name attribute is missing for your select option
Also, the select option should have value=""
<Label for="religion">Select Your Religion</Label>
<select required name="religion" class="form-control" id="religion">
<option value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Like the validator message says
...must have either an empty value attribute, or must have no text content...
Make sure your option has an empty value, like <option disabled value="">
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>

Chrome Credit Card Autofill Field Name Bug/Conflict

Does anyone know why a form field name would cause Chrome's autofill to stop working correctly? If you open the fiddle I've created in Chrome, you'll notice the Card Number field populates correctly, but not the expiry month and year. If you change the name of the BirthDate.MM select list to BirthDate.Foo and BirthDate.YYYY to BirthDate.Bar; and then and re-run, the credit card autofill works as expected. Now, an obvious suggestion would be to simply disable the bday- autofill and change the those values to "off" or completely remove the autocomplete attribute. Astoundingly, removing the autocomplete attribute or changing the bday- values to "off" on those fields then breaks the address autofill!!!
The solution to the autofill problem itself is simply change the field names. What I want to know is why? Can anyone clarify how I unwittingly poked Chrome's field name sniffing feature?
<fieldset>
<legend>Payment Information</legend>
<div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
<div>
<label for="CreditCard_ExpirationMonth">Expires:</label>
<select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
<option value="">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
</select>
</div>
</fieldset>
Use the lower-case version of your names.
For me , using Name as name attribute is not working, autofill recognizes the field as CC !!
If I change it to name , works like a charm.
Hope this helps!

placeholder value for select not showing when using ngmodel

I am trying to have a select drop down display the first option as a placeholder value
The following code works
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select>
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
however the following code does not
<form (ngSubmit)="citySubmit(f)" #f="ngForm">
<select
[ngModel]="city">
<option value="" disabled selected>Select Your City</option>
<option *ngFor="let c of cities" [value]="c">{{c}}</option>
</select>
</form>
which leads me to believe I am using the ngmodel incorrectly.
Can I have some guidance please.
It should be,
Change
From
<select [ngModel]="city">
To
<select [(ngModel)]="city">

For following drop down list , 'required' attribute is not working

If user selects " - - select - -" from options , it should be treated as blank field. It should trigger 'required' attribute so that the browser would show alert message while submitting the form as: "Please fill out this field" .
I tried hard but no solution found.
HTML:
<form>
<select id="post" name="post" required="required" title="post you are applying for" class="formfield3" />
<option value="0"> - - select - -</option>
<option value="1">Mobile App Developer</option>
<option value="2">DataBase Administrator</option>
<option value="3">Search Engine Optimizer</option>
<option value="4">Product Manager</option>
<option value="5">HR Manager</option>
</select>
<input type=submit>
</form>
I am using newest version chrome and 'required' is working for other tags such as textfields etc.
To make browser treat it as a blank field, make it blank - change 0 to an empty string:
<select id="post" name="post" required="required" title="post you are applying for" class="formfield3" />
<option value=""> - - select - -</option>
<option value="1">Mobile App Developer</option>
<option value="2">DataBase Administrator</option>
<option value="3">Search Engine Optimizer</option>
<option value="4">Product Manager</option>
<option value="5">HR Manager</option>
</select>
Following code did not work for me:
<select id="example1" name="example1" required="required" />
<option value="0"> - - select - -</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
Following code worked for me:
<select id="example1" name="example1" required="required" />
<option value=""> - - select - -</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
The difference being value="" vs value="0"

Include hidden input with optgroup

Is it possible to to include multiple (or a single) <input type = hidden> nested within an <optgroup>'s <option>?
For example, I might have
<select>
<optgroup label="North America">
<option value="Canada">Canada</option>
<input type="hidden" name="capital" value="Ottawa">
<option value="United States">United States</option>
<input type="hidden" name="capital" value="Washington D.C.">
<option value="Mexico">Mexico</option>
<input type="hidden" name="capital" value="Mexico City">
</optgroup>
...
</select>
If I choose "Canada" could I get "Ottawa" and only "Ottawa" submitted also?
What you are asking for is not exactly possible, but it sounds like the result you want is...
<select name="capital">
<optgroup label="North America">
<option value="Ottawa">Canada</option>
<option value="Washington D.C.">United States</option>
<option value="Mexico City">Mexico</option>
</optgroup>
...
</select>
When the user selects "Canada" from the drop-down, the value "Ottawa" will be submitted to the server.