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?

Improve this question
1

3 Answers 3

Reset to default
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.
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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

Improve this answer

1 Comment

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.
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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.