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.
La pseudo-classe CSS :invalid cible tout élément <input> pour lequel la 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 id="email" name="email" type="email" value="na@me@example.com" />
<label for="secret">Code secret : (lettres minuscules)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Votre âge : (18+)</label>
<input id="age" 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 class="field">
<label for="url_input">Veuillez saisir une URL :</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Veuillez saisir une adresse électronique :</label>
<input type="email" id="email_input" 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 attribut name) possède l'attribut required , 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
Chargement...
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