Menu
Using the following code on select:
<select name="province" id="province" required="required">
<optgroup label="Provinces">
<option value="Alberta">Alberta</option>
<option value="British Colombia">British Colombia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario" selected="selected">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territories">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
I need to have values same as the options its just required by guidelines. This code works fine but doesn't pass the W3C validation:
A
selectelement with arequiredattribute and without amultipleattribute, and whose size is 1, must have a childoptionelement.
What would be the solution to this problem?
532
The required attribute is there in the HTML select element. If it is not working for you, then try checking back the “first value” field. You need an empty value there.
The required attribute of the <select> element is to let users know that the <select> drop-down is required and need to be submitted before the form is submitted. If you won't select the value from the drop-down and try to submit the form, it won't submit and a warning would be visible on the web page itself.
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Use the following
<option value="">Choose</option>
Append the above series as first option
98
Maintainer of the W3C HTML Checker (aka validator) here.
Now it seems you must use a non-breaking space to pass the validator:
<option value=""> </option>
Yeah I’m not sure when I changed that in the checker. I thought I hadn’t changed anything there in a couple of years but regardless, the checker is conforming to the HTML spec on this, because if you go to https://html.spec.whatwg.org/multipage/forms.html#the-option-element and read the Content model subsection in the head of that section, you’ll see:
If the element has no label attribute: Text that is not inter-element whitespace.
In HTML, the definition of which characters can be inter-element whitespace characters includes just U+0020 (space), tab, U+000A (LF), U+000C FORM FEED, and U+000D (CR).
In other words, HTML essentially considers the non-breaking space character to be Text—not a space character—so putting it inside an option element makes that option element “non-empty” (as far as the spec is concerned).
So, doing <option value=""> </option> isn’t really a hack; instead, it’s a perfectly reasonable way (again, as far as the spec is concerned) to make an option non-empty.
25
Sometimes you really just want to have a blank option. You used to be able to just insert a single space and the w3c validator would accept it. This used to work:
<option value=""> </option>
Now it seems you must use a non-breaking space to pass the validator:
<option value=""> </option>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
