html-select - multiple - validar que un select esta seleccionado

Error de validación de HTML5 con el atributo requerido seleccionado

Question

Usando el siguiente código en 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>   

Necesito tener los mismos valores que las opciones que solo requieren las directrices. Este código funciona bien pero no pasa la validación W3C:

Un elemento de select con un atributo required y sin un atributo multiple , y cuyo tamaño es 1, debe tener un elemento de option secundario.

¿Cuál sería la solución a este problema?

Answer 1

A veces realmente solo quieres tener una opción en blanco. Antes solo se podía insertar un espacio y el validador w3c lo aceptaría. Esto solía funcionar:

<option value=""> </option>

Ahora parece que debe usar un espacio de no separación para pasar el validador:

<option value="">&nbsp;</option>

Answer 2

Mantenedor del verificador HTML del W3C (también conocido como validador) aquí.

Ahora parece que debe usar un espacio de no separación para pasar el validador:

<option value="">&nbsp;</option>

Sí, no estoy seguro de cuándo cambié eso en el comprobador. Pensé que no había cambiado nada allí en un par de años, pero a pesar de eso, el verificador cumple con la especificación HTML de esto, porque si vas a https://html.spec.whatwg.org/multipage/forms.html#the-option-element y lea la subsección Modelo de contenido en el encabezado de esa sección, verá:

Si el elemento no tiene un atributo de etiqueta: texto que no sea un espacio en blanco entre elementos.

En HTML, la definición de qué caracteres pueden ser inter-element whitespace incluye solo U + 0020 (espacio), tabulador, U + 000A (LF), U + 000C FORM FEED y U + 000D (CR).

En otras palabras, el HTML considera esencialmente que el carácter de espacio de no separación es Texto, no un carácter de espacio, por lo que colocarlo dentro de un elemento de option hace que ese elemento de option "no vacío" (en lo que respecta a la especificación).

Entonces, hacer <option value="">&nbsp;</option> no es realmente un hack; en cambio, es una forma perfectamente razonable (de nuevo, en lo que concierne a la especificación) hacer que una option no esté vacía.

Answer 3

Usa lo siguiente

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

Anexa la serie anterior como primera opción.

• considerado válido ya que el primer elemento hijo no tiene contenido.