I have the following code on a required select :
<select required="required">
<option value="1">01</option>
<option value="2">02</option>
...
<option value="31">31</option>
</select>
In my (HTML5 / symfony2) app its a required date (day) so the value must be between 1 and 31 and I do not want blank/null values.
Even though the code works, it breaks w3c validation with the following error :
The first child option element of a select element with a required
attribute and without a multiple attribute, and whose size is 1, must
have either an empty value attribute, or must have no text content.
What is the best approach to the problem
With require attribute:
<select required="required">
<option value=""></option><!-- added empty value -->
<option value="1">01</option>
<option value="2">02</option>
...
<option value="31">31</option>
</select>
Without – just remove require attribute:
<select>
<option value="1">01</option>
<option value="2">02</option>
...
<option value="31">31</option>
</select>
Related
I am trying to create a input-box where the available anwsers ar listed in a list below. This I can do but i am not able to sort the available anwsers in optgroups. When the code runs the anwsers is listed without the optgroups.
Is it at all possible to use optgroups in datalists or is optgroups exclusive to select elements?
Here is a code sample where the optgroups is not shown
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<optgroup value="Elbilar">elbil
<option value="teslas">Tesla Model S</option>
<option value="teslax">Tesla Model X</option>
<option value="tesla3">Tesla Model 3</option>
<option value="i3">BMW i3</option>
<option value="id3">Volkswagen ID.3</option>
<option value="id4">Volkswagen ID.4</option>
<option value="niro">KIA Niro</option>
<option value="etron">Audi e-Tron</option>
<option value="polestar">Polestar 2</option>
<option value="xc40e">Volvo XC40 Recharge</option>
<option value="leaf">Nissan Leaf</option>
<option value="taycan">Porsche Taycan</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="outlander">Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid">Volvo V60 twin engine</option>
<option value="optima">KIA Optima SV</option>
<option value="passatgte">Volkswagen Passat GTE</option>
<option value="priushybrid">Toyota Prius Hybrid</option>
<option value="golfgte">Volkswagen Golf GTE</option>
<option value="x545e">BMW X5 45e</option>
<option value="530e">BMW 530e</option>
</optgroup>
</datalist>
As the documentation says for <optgroup> :
Permitted parents: A <select> element.
There are no other elements mentioned as permitted parents. Therefore optgroup is exclusively a child of select.
While optgroups is exclusively a child of select, select can be a child of datalist!
Although it is not the cleanest solution, you can use a trick used for compatibility of browsers that don't support datalist https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
In the more elaborate case, the datalist element can be given contents that are to be displayed for down-level clients that don't support datalist. In this case, the option elements are provided inside a select element inside the datalist element.
With the addition of value="" readonly to an option displaying the optgroup name. So that it is not possbile to select it.
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<label> Select from the list:
<select name="car">
<optgroup value="Elbilar">elbil
<option value="" readonly>Elbilar</option>
<option value="teslas"> >Tesla Model S</option>
<option value="teslax"> >Tesla Model X</option>
<option value="tesla3"> >Tesla Model 3</option>
<option value="i3"> >BMW i3</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="" readonly>Plug-in Hybrider</option>
<option value="outlander"> >Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid"> >Volvo V60 twin engine</option>
<option value="optima"> >KIA Optima SV</option>
</optgroup>
</select>
</label>
</datalist>
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>
The "required" validation is working for form
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
but is not working for the same form if I move the option with empty value down the list.
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>
Why?
How exactly does the select element validation work?
Referred to the following: https://www.w3schools.com/tags/att_select_required.asp
The following is from w3 docs:
The required attribute is a boolean attribute. When specified, the
user will be required to select a value before submitting the form.
...
if the value of the first option element in the select element's
list of options (if any) is the empty string
...
Which means that the required attribute works only if the value of the first element is empty
It's not an issue with Select2 but with the way browser work with select tag. By default, the first option is selected by the browser.
So, in the first case "None" option is selected and hence your validation catch the error because the first option value is null.
In the second, case the first option is not null. Hence there is no validation error in this case.
To correct it, add an empty option with an empty value and set the attribute as selected disabled
Demo: https://jsfiddle.net/rLmztr2d/2909/
HTML:
<form>
<select required id="example">
<option disabled selected></option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
JS:
$('#example').select2();
Need some help here. I inherited this code and I am not 100% on what needs to be done here but I need to set the default selected item to be the first group/first option instead of the data-placeholder.
I tried using ng-init but I wasn't able to get it to work.
How can I achieve this with the below code?
<div ng-repeat='searchField in searchFields.device'>
<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
<option value=''></option>
<optgroup label='FooGroup1'>
<option value='foo_option1'>foo_option1</option>
</optgroup>
<optgroup label='FooGroup2'>
<option value='foo_option1'>foo_option1</option>
<option value='foo_option1'>foo_option1</option>
</optgroup>
</select>
....
ACTUAL HAML
%div(ng-repeat="searchField in searchFields.message")
%select(ng-model="searchField[0]" ui-select2 data-placeholder="Search Field" ng-init="searchField[0] = ")
%option(value="")
- devices_optgroup.each do |group, attrs|
%optgroup{label: group}
- attrs.each do |attr, label|
%option(value="#{attr}")= label
The <option> element allows for an optional selected attribute. From MDN:
selected
If present, this Boolean attribute indicates that the option is initially selected. If the element is the descendant of a element whose multiple attribute is not set, only one single of this element may have the selected attribute.
So if you want to select the first element of the first <optgroup> you can do something like this:
<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
<option value=''></option>
<optgroup label='FooGroup1'>
<option value='foo_option1' selected>foo_option1</option>
</optgroup>
<optgroup label='FooGroup2'>
<option value='foo_option1'>foo_option1</option>
<option value='foo_option1'>foo_option1</option>
</optgroup>
</select>
I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>
I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>