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?

Deaconess

Possible duplicate of default select option as blank – Condor

Answer 1

Use the following

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

Append the above series as first option

• considered valid as the first child element has no content.

Poison

<option></option> is no longer valid (Element option without attribute label must not be empty.), gotta have text inbetween like your first <option value="">OM NOM</option> – Deejay

doing those ways adds an additional validation error – Deaconess

@Deaconess Pandiyan's answer should validate, I just tried, <option value="">just make sure to have text here</option> – Deejay

same one! after adding what marcel posted! following your way adds an additional validation error! <Element option without attribute label must not be empty> – Deaconess

Okay then use default text like choose or select inside it. otherwise you will be cornered to remove required attribute. – Poison

@PandiyanCool it works when you add <option value="">Choose</option> before <optgroup>. thanks for the help – Deaconess

Answer 2

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

Kaltman

Thank you for this excellent explanation and for maintaining this excellent tool! <option>&#160;</option> or <option>&nbsp;</option> 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. – Condor

Answer 3

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>

Avifauna