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

256

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

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

Mat
la source
1
Si vous êtes intéressé par n'importe quel niveau de compatibilité entre les navigateurs, vous devrez probablement utiliser JavaScript. L'attribut que vous voulez est selectedIndex.
Luke Sneeringer
4
Selon le brouillon de l'éditeur actuel de la spécification HTML5 (6 août 2011), l'élément select a un attribut requis. "L'attribut requis est un attribut booléen. Lorsqu'il est spécifié, l'utilisateur devra sélectionner une valeur avant de soumettre le formulaire." dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Réponses:

471

Obligatoire : avoir la première valeur vide - travaux requis sur les valeurs vides

Prérequis : corriger le DOCTYPE html5 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 et le gras sont les miens)

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

Si un élément sélectionné

  • a un attribut obligatoire 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 si vous n'en avez pas besoin);
  • 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 présente comme value=""),
  • et le nœud parent de cet élément d'option est l'élément select (et non un élément optgroup),

alors cette option est l'option d'étiquette d'espace réservé de l'élément select.

mplungjan
la source
27
De plus, afin que l'utilisateur ne puisse pas sélectionner la non-option une fois qu'elle a été sélectionnée: <option selected = "selected" disabled = "disabled" value = ""> Veuillez sélectionner </option>
CoolAJ86
2
Cela n'a pas de sens ... De plus, cela ne fonctionnera pas sur plusieurs navigateurs
mplungjan
4
@ CoolAJ86 Fonctionne bien dans Chrome 23, Firefox 16 et IE 10.
KTB
15
Je vois 2 downvotes. Si vous avez envie de downvoting ce commentaire S'IL VOUS PLAÎT quant à POURQUOI
mplungjan
1
La paraphrase de la documentation est très utile; merci
skia.heliou
13

L' <select>élément prend en charge l' requiredattribut, selon 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 les utilisateurs auront activé JavaScript.)

Paul D. Waite
la source
8
Je suis sûr qu'il avait juste besoin d'une valeur = "" sur la première entrée - s'il n'y a pas d'attribut de valeur ou une valeur sur toutes les options, le requis ne se déclenche pas car la sélection renvoie une valeur réelle
mplungjan
1
@mplungjan: ah , gotcha - bien repéré.
Paul D. Waite
1
@ PaulD.Waite Ne pouvons-nous toujours pas garantir que les utilisateurs auront activé Javascript? Je ne suis dans le développement Web que depuis 2 ans maintenant et je n'ai jamais rencontré ce problème.
user137717
2
@ user137717: C'est le Web. Vous ne pouvez rien garantir. Vous pouvez, bien sûr, décider que cela ne vaut pas la peine d'être pris en charge.
Paul D. Waite
5

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

En Javascript, vous pouvez vérifier la selectedIndexpropriété pour obtenir l'index de l'option sélectionnée, ou vous pouvez vérifier la valuepropriété 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 s'il n'y a pas d'élément sélectionné. Et value" renvoie la valeur du premier élément sélectionné, le cas échéant, ou la chaîne vide s'il y a aucun é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>
james.garriss
la source
1
@Apostle - Veuillez cesser d'essayer de modifier cette réponse via des modifications. Si vous pensez que c'est incorrect, n'hésitez pas à laisser votre propre réponse.
Brad Larson
@BradLarson Au début, je ne comprenais pas très bien: le code n'est pas une solution complète au problème de cette question ou est un exemple explicatif du dernier paragraphe de cette réponse. Probablement deuxième dans ce cas. Je pense qu'il vaut mieux organiser ce code en tant qu'extrait et afficher le résultat -1. Désolé, je n'ai pas précisé dans les commentaires en premier.
Apôtre
5

Oui, ça marche:

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

vous devez laisser la première option vide.

Pradipgarala
la source
1
<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>
yatou
la source
3
Cette réponse ne fait que répéter un exemple précédent sans explication supplémentaire.
james.garriss
1

vous devez d'abord attribuer une valeur vide dans la première option. c.-à-d. Sélectionnez ici.que seul requis fonctionnera.

ayush
la source
0

Rendre la valeur du premier élément de la zone de sélection vide.

Ainsi, lorsque vous postez le FORMULAIRE, vous obtenez une valeur vide et en utilisant cette méthode, vous saurez que l'utilisateur n'a rien sélectionné dans la liste déroulante.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
santosh devnath
la source
0

Vous devez définir l' valueattribut de optionsur 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>

selectretournera le valuefichier sélectionné optionau serveur lorsque l'utilisateur appuiera submitsur form. Un vide valueest identique à une textentrée vide -> élever le requiredmessage.


w3schools

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

Exemple

JBallin
la source
0

essayez ça, ç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>
sayyed tabrez
la source
0

Fonctionne parfaitement bien si la valeur de la première option est nulle. Explication: Le HTML5 lira une valeur nulle lors de la soumission du bouton. Si non nul (attribut de valeur), la valeur sélectionnée est supposée ne pas être nulle, la validation aurait donc fonctionné, c'est-à-dire en vérifiant s'il y avait des données dans la balise d'option. Par conséquent, il ne produira pas la méthode de validation. Cependant, je suppose que l'autre côté devient clair, si l'attribut value est défini sur null, c'est-à-dire (valeur = ""), HTML5 détectera une valeur vide sur la première ou plutôt l'option sélectionnée par défaut, donnant ainsi le message de validation. Merci d'avoir posé la question. Heureux d'aider. Heureux de savoir si je l'ai fait.

Kudzai Machiridza
la source
-1

En html5, vous pouvez faire en utilisant l'expression complète:

<select required="required">

Je ne sais pas pourquoi la courte expression ne fonctionne pas, mais essayez celle-ci. Cela résoudra.

Roger Rocco
la source
-4

Essaye ça

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
user2289459
la source
-6

Vous pouvez aussi le faire dynamiquement avec JQuery

Ensemble requis

$("#select1").attr('required', 'required');

Supprimer requis

$("#select1").removeAttr('required');
mlqmarkos12
la source