22

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?

1

3 Answers 3

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.
6
  • 1
    <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>
    – Marcel
    Mar 6, 2014 at 22:48
  • doing those ways adds an additional validation error
    – Sobasofly
    Mar 6, 2014 at 22:50
  • 1
    @Sobasofly Pandiyan's answer should validate, I just tried, <option value="">just make sure to have text here</option>
    – Marcel
    Mar 6, 2014 at 22:53
  • same one! after adding what marcel posted! following your way adds an additional validation error! <Element option without attribute label must not be empty>
    – Sobasofly
    Mar 6, 2014 at 22:54
  • Okay then use default text like choose or select inside it. otherwise you will be cornered to remove required attribute. Mar 6, 2014 at 22:55
25

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.

1
  • 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. Feb 25, 2019 at 15:58
13

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>
2
  • 6
    Don't you love Progress!
    – cbp
    May 6, 2015 at 2:23
  • I love tests as interpretation of conformance, which I call progress!
    – sage
    Jan 15, 2017 at 22:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.