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

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? : /

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.

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

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>

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.

<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>

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

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>

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

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>

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.

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.

Essaye ça

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

Vous pouvez aussi le faire dynamiquement avec JQuery

Ensemble requis

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

Supprimer requis

$("#select1").removeAttr('required');