HTML5 Validation error with select required attribute

Question

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 select element with a required attribute and without a multiple attribute, and whose size is 1, must have a child option element.

What would be the solution to this problem?

Possible duplicate of [default select option as blank](https://stackoverflow.com/questions/8605516/default-select-option-as-blank) — GlenPeterson, Feb 25 '19 at 16:40

Pandiyan Cool · Accepted Answer · 2014-03-06T22:51:04.713

33

Use the following

<option value="">Choose</option>

Append the above series as first option

considered valid as the first child element has no content.

edited Mar 06 '14 at 22:51

answered Mar 06 '14 at 22:44

Pandiyan Cool

6,381
8
51
87

1

`` is no longer valid (Element option without attribute label must not be empty.), gotta have text inbetween like your first `` – Marcel Mar 06 '14 at 22:48
doing those ways adds an additional validation error – Sobasofly Mar 06 '14 at 22:50
1

@Sobasofly Pandiyan's answer should validate, I just tried, `` – Marcel Mar 06 '14 at 22:53
same one! after adding what marcel posted! following your way adds an additional validation error! – Sobasofly Mar 06 '14 at 22:54
Okay then use default text like choose or select inside it. otherwise you will be cornered to remove required attribute. – Pandiyan Cool Mar 06 '14 at 22:55
@PandiyanCool it works when you add before . thanks for the help – Sobasofly Mar 06 '14 at 22:56

score 25 · Answer 2 · answered Aug 04 '15 at 04:13

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.

Thank you for this excellent explanation and for maintaining this excellent tool! `` or `` works too. It's important that we continue to have a way to show an empty option when we need to force the user to choose something. — GlenPeterson, Feb 25 '19 at 15:58

score 13 · Answer 3 · answered Apr 15 '15 at 14:20

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="">&nbsp;</option>

HTML5 Validation error with select required attribute

3 Answers3