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>
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>
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
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.
"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
impec
19/08/2021
keygen
merci tu nous sort d'une galère lá
20/08/2021
simplice
Cool
18/09/2021
ptoss
Super
20/10/2022
Jean
MERCI !
c'est tellement évident que la plupart des sites (spécialisés) sur le web ne prennent même pas la peine de le préciser !
c'est tellement évident que la plupart des sites (spécialisés) sur le web ne prennent même pas la peine de le préciser !
08/02/2023
Alain
Ça ne fonctionne pas ...
22/02/2023
Agathe
Ajouter un commentaire :
- Votre commentaire a bien été posté et sera publié après validation par le webmaster du site.