:invalid
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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@[email protected]" />
<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
Loading…
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