web-dev-qa-db-fra.com

Erreur de validation HTML5 avec sélectionner l'attribut requis

Utilisation du code suivant sur 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>

J'ai besoin d'avoir les mêmes valeurs que les options qui sont juste requises par les directives. Ce code fonctionne bien mais ne passe pas la validation W3C:

Un élément select avec un attribut required et sans attribut multiple, et dont la taille est 1, doit avoir un élément enfant option.

Quelle serait la solution à ce problème?

html-selectw3c-validation
19
Sobasofly

Utilisez le suivant

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

Ajouter la série ci-dessus comme première option

  • considéré comme valide car le premier élément enfant n'a pas de contenu.
31
Pandiyan Cool

Mainteneur du W3C HTML Checker (aka validateur) ici.

Il semble maintenant que vous devez utiliser un espace insécable pour passer le validateur:

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

Ouais, je ne sais pas quand j'ai changé ça dans le vérificateur. Je pensais que je n'avais rien changé depuis quelques années, mais peu importe, le vérificateur se conforme aux spécifications HTML à ce sujet, car si vous allez sur https://html.spec.whatwg.org/multipage /forms.html#the-option-element et lisez la sous-section Modèle de contenu en tête de cette section, vous verrez:

Si l'élément n'a pas d'attribut d'étiquette: texte qui n'est pas un espace blanc inter-éléments.

En HTML, la définition des caractères pouvant être inter-element whitespace caractères comprend uniquement U + 0020 (espace), tabulation, U + 000A (LF), U + 000C FORM FEED et U + 000D (CR).

En d'autres termes, HTML considère essentiellement que le caractère d'espace insécable est du texte - pas un caractère d'espace - donc le placer à l'intérieur d'un élément option rend cet élément option "non vide" (comme en ce qui concerne la spécification).

Donc, faire <option value="">&nbsp;</option> n'est pas vraiment un hack; au lieu de cela, c'est une façon parfaitement raisonnable (encore une fois, en ce qui concerne la spécification) de rendre un option non vide.

19
sideshowbarker

Parfois, vous voulez vraiment avoir une option vide. Avant, vous pouviez simplement insérer un seul espace et le validateur w3c l'accepterait. Cela fonctionnait auparavant:

<option value=""> </option>

Il semble maintenant que vous devez utiliser un espace insécable pour passer le validateur:

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