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?

Was it helpful?

Solution

Use the following

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

Append the above series as first option

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

OTHER TIPS

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.

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top