web-dev-qa-db-fra.com

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

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

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

javascripthtml5selectrequired
242
Matt

Obligatoire : Avoir la première valeur vide - obligatoire fonctionne sur les valeurs vides

Prérequis : DOCTYPE html5 correct et un champ de saisie nommé

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

Selon la documentation (la liste en gras est à moi)

L'attribut requis est un attribut booléen.
Lorsque spécifié, l'utilisateur devra sélectionner une valeur avant de soumettre le formulaire.

Si un élément select

  • a un attribut requis spécifié,
  • n'a pas d'attribut multiple spécifié,
  • et a une taille d'affichage de 1 (ne pas avoir SIZE = 2 ou plus - omettez-le s'il n'est pas nécessaire);
  • et si la valeur du premier élément d'option dans la liste d'options de l'élément de sélection (le cas échéant) est la chaîne vide (c'est-à-dire sous la forme value=""),
  • et le noeud parent de cet élément d'option est l'élément select (et non un élément optgroup),

alors cette option est l'option de libellé d'espace réservé de l'élément sélectionné.

449
mplungjan

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

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 JavaScript sera activé pour les utilisateurs.)

13
Paul D. Waite

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

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

Selon la spécification HTML5, selectedIndex "renvoie l'index du premier élément sélectionné, le cas échéant, ou -1 si aucun élément n'est sélectionné. Et value" renvoie la valeur du premier élément sélectionné, le cas échéant, ou la chaîne vide s'il n'y a pas d'élément sélectionné. "Donc, si selectedIndex = -1, alors vous savez qu'ils n'ont rien sélectionné.

<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>
5
james.garriss

Oui, ça marche:

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

vous devez garder la première option en blanc.

4
pradipgarala

vous devez d’abord attribuer une valeur vide dans la première option. c’est-à-dire que vous devez sélectionner uniquement ici.

1
ayush

essayez ceci, ça va marcher, j'ai essayé ça et ça marche.

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>
0
sayyed tabrez

Vous devez définir l'attribut value de option sur la chaîne vide:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

select renvoie le value du option sélectionné au serveur lorsque l'utilisateur appuie sur submit sur le form. Un value vide est identique à une entrée text vide -> augmentant le message required.

w3schools

L'attribut value spécifie la valeur à envoyer à un serveur lorsqu'un formulaire est soumis.

Exemple

0
JBallin

Faites en sorte que la valeur du premier élément de la boîte de sélection soit vide.

Ainsi, chaque fois que vous postez le FORMULAIRE, vous obtenez une valeur vide et vous savez ainsi que l'utilisateur n'a pas encore sélectionné de menu déroulant.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
0
santosh devnath
<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>
0
yatou