:invalid
La pseudo-classe :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 à identifier et à corriger les erreurs.
/* Cible n'importe quel élément input */
/* dont la valeur ne satisfait pas aux */
/* critères de validation */
input:invalid {
background-color: pink;
}
Syntaxe
Error: could not find syntax for this item
Exemple
Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.
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: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
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>
Résultat
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.
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 :-moz-ui-invalid
, qui s'applique dans un sous-ensemble des cas de :invalid
.
Ce halo peut être désactivé avec les règles suivantes :
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow: none;
}
Spécifications
Specification |
---|
HTML Standard # selector-invalid |
Selectors Level 4 # validity-pseudos |
Compatibilité des navigateurs
BCD tables only load in the browser