Création de sites web en éco-conception

12/02/2015 Attribut required dans un select

Comment rendre une liste déroulante de type "select" obligatoire grâce à l'attribut "required" ?

Dans le code suivant, l'attribut required est parfaitement inutile :

<select required> <option>--- choisissez un chiffre</option> <option value="1">un</option> <option value="2">deux</option> </select>
Test :

En effet, même sans avoir choisi ni l'option "1" ni l'option "2", ce champ non rempli ne bloquera pas la soumission du formulaire. Pourquoi ? Car pour le navigateur, il n'est justement pas vide. Pourquoi ? Eh bien parce qu'une option a bien été choisie : la première, de valeur "--- choisissez un chiffre ---".

Pour qu'un attribut required soit effectif dans un champ de type "select", il faut que son "placeholder" (l'option qui sert de titre) ait une valeur nulle. Il suffit de procéder ainsi :

<select required> <option value="">--- choisissez un chiffre</option> <option value="1">un</option> <option value="2">deux</option> </select>
Test :

Commentaires

Merci pour l'info bien utile
05/01/2018
chloe5972
Parfait :), merci ;)
26/11/2018
Link
vraiment tres utile merci
07/12/2018
YAO
Merci
27/01/2019
Valt
Merci, c'est vraiment très utile
27/01/2019
Valt
merci beaucoup, :-)
19/06/2019
LAndry NG
Merci très utile
01/08/2019
YFE
Merci simple et efficace !
25/08/2019
kln2.37
Simple et très éfficace
25/11/2019
sene
Grave Grave... Merci
16/05/2020
TicTac
Cool
29/09/2020
Yoyo
Très efficace comme solution
09/10/2020
Auguste
Merci pour l'astuce, cela m'a beaucoup aidé.
20/10/2020
Hamid
efficace la solution
31/10/2020
fedronic
Merci pour l'astuce. Tu as bien reflechi
10/11/2020
M_C
MERCI!
28/01/2021
Herman
Bonjour
J'applique le "required" c'est parfait mais comme mais "input j'essaye la validation de données avec "invalid-feedback", mais je n'ai pas d'affichage pour l'utilisateur. Qu'elle est l'astuce dans le code de cette page ? Merci
05/02/2021
francis
@francis
"invalid-feedback" semble lié à Bootstrap. Vu que je ne connais pas ce système, je vous suggère de poser votre question sur un forum orienté Bootstrap.
06/02/2021
Nuweb

Ajouter un commentaire :