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?

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.