Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:invalid
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Lapseudo-classeCSS:invalid cible tout élément<input> pour lequella validation du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur·ice à identifier et à corriger les erreurs.
Exemple interactif
label { display: block; margin-top: 1em;}input:invalid { background-color: ivory; border: none; outline: 2px solid red; border-radius: 5px;}<form> <label for="email">Adresse e-mail :</label> <input name="email" type="email" value="na@me@example.com" /> <label for="secret">Code secret : (lettres minuscules)</label> <input name="secret" type="text" value="test" pattern="[a-z]+" /> <label for="age">Votre âge : (18+)</label> <input name="age" type="number" value="5" min="18" /> <label ><input name="tos" type="checkbox" required checked /> - Acceptez-vous les CGU ?</label ></form>Cette pseudo-classe est utile pour mettre en évidence les erreurs de champ pour l'utilisateur·ice.
Syntaxe
:invalid { /* ... */}Accessibilité
La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.
Exemple
Colorer les éléments pour indiquer la validation
HTML
<form> <div> <label for="url_input">Veuillez saisir une URL :</label> <input type="url" /> </div> <div> <label for="email_input">Veuillez saisir une adresse électronique :</label> <input type="email" required /> </div></form>CSS
label { display: block; margin: 1px; padding: 1px;}.field { margin: 1px; padding: 1px;}input:invalid { background-color: #ffdddd;}form:invalid { border: 5px solid #ffdddd;}input:valid { background-color: #ddffdd;}form:valid { border: 5px solid #ddffdd;}input:required { border-color: maroon; border-width: 3px;}input:required:invalid { border-color: #c00000;}Résultat
Notes
Boutons radio
Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attributname) possède l'attributrequired , la pseudo-classe:invalid est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.
Gestion dans Gecko
Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe:invalid. Toutefois un style différent est appliqué (un halo rouge utilisant la propriétébox-shadow) via la pseudo-classe:user-invalid, qui s'applique dans un sous-ensemble des cas de:invalid.
Spécifications
| Specification |
|---|
| HTML # selector-invalid |
| Selectors Level 4 # invalid-pseudo |
Compatibilité des navigateurs
Voir aussi
- Autres pseudo-classes liées à la validation :
- Pseudo-classes Mozilla liées :
- Validation des données de formulaire
- Accéder à l'état de validité depuis JavaScript