Puis-je appliquer l'attribut requis à <select> champs en HTML5?

Question

Comment puis-je vérifier si un utilisateur a sélectionné quelque chose dans un champ <select> en HTML5?

Je vois <select> ne supporte pas le nouvel attribut required ... dois-je utiliser JavaScript alors? Ou y a-t-il quelque chose qui me manque? : /

Answer 1

Cela fonctionne pour moi la première valeur vide - requis fonctionne sur des valeurs vides.

<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

Selon la documentation (de l'inscription et de gras est de moi)

L'attribut obligatoire est un booléen attribut.
Lorsqu'il est spécifié, l'utilisateur sera demandé de sélectionner une valeur avant de soumettre le formulaire.

Si un élément select

• un attribut obligatoire spécifié,
• n'est pas un multiple de l'attribut spécifié,
• et a une taille d'affichage de 1;
• et si la valeur de la première option de l'élément dans le sélectionnez l'élément de liste d'options (si tout) est la chaîne vide,
• et que l'option de l'élément de nœud parent est l' sélectionnez l'élément (et non pas une "optgroup" élément),

alors que l'option est l' sélectionnez l'élément de l'espace réservé à l'étiquette option.

Answer 2

L'élément <select> prend en charge l'attribut required , conformément à la spécification:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

Quel navigateur n'honore pas cela?

(Bien sûr, vous devez quand même valider sur le serveur, car vous ne pouvez pas garantir que les utilisateurs auront JavaScript activé.)

Answer 3

Vous pouvez utiliser l' selected de l'attribut de l'élément option pour sélectionner un choix par défaut. Vous pouvez utiliser l' required de l'attribut de l'élément select pour s'assurer que l'utilisateur sélectionne quelque chose.

En Javascript, vous pouvez vérifier l' selectedIndex propriété afin d'obtenir l'indice de l'option sélectionnée, ou vous pouvez vérifier l' value de la propriété pour obtenir la valeur de l'option sélectionnée.

Selon la spec HTML5, selectedIndex "renvoie l'index du premier élément sélectionné, le cas échéant, ou -1 s'il n'existe aucun élément sélectionné. Et value "retourne la valeur du premier élément sélectionné, le cas échéant, ou la chaîne vide s'il n'existe aucun élément sélectionné". Donc, si selectedIndex = -1, alors vous savez qu'ils n'ont pas choisi n'importe quoi.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

Answer 4

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

Answer 5

Essaye ça

 <select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>