Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Validation error with select required attribute

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?

like image 532
Sobasofly Avatar asked Mar 06 '14 22:03

Sobasofly


People also ask

Why required is not working in select tag?

The required attribute is there in the HTML select element. If it is not working for you, then try checking back the “first value” field. You need an empty value there.

Can we use required in select tag?

The required attribute of the <select> element is to let users know that the <select> drop-down is required and need to be submitted before the form is submitted. If you won't select the value from the drop-down and try to submit the form, it won't submit and a warning would be visible on the web page itself.

How do you change required in HTML?

The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.


3 Answers

Use the following

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

Append the above series as first option

  • considered valid as the first child element has no content.
like image 98
Pandiyan Cool Avatar answered Oct 19 '22 11:10

Pandiyan Cool


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.

like image 25
sideshowbarker Avatar answered Oct 19 '22 13:10

sideshowbarker


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>
like image 13
Ryan Avatar answered Oct 19 '22 11:10

Ryan