:valid
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 :valid permet de cibler tout élément <input> ou <form> dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.
Exemple interactif
label {
display: block;
margin-top: 1em;
}
input:valid {
background-color: ivory;
border: none;
outline: 2px solid deepskyblue;
border-radius: 5px;
accent-color: gold;
}
<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>
La pseudo-classe est utile pour mettre en évidence les champs corrects pour l'utilisateur·ice.
Syntaxe
:valid {
/* ... */
}
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.
Exemples
Indicateurs de champs de formulaire valides et invalides
Dans cet exemple, nous utilisons des structures comme celle-ci, qui incluent des <span> supplémentaires pour générer du contenu ; nous les utiliserons pour fournir des indicateurs de données valides/invalides :
<div>
<label for="fname">Prénom * : </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
Pour fournir ces indicateurs, nous utilisons le CSS suivant :
input + span {
position: relative;
}
input + span::before {
position: absolute;
right: -20px;
top: 5px;
}
input:invalid {
border: 2px solid red;
}
input:invalid + span::before {
content: "✖";
color: red;
}
input:valid + span::before {
content: "✓";
color: green;
}
Nous définissons les <span> sur position: relative afin de pouvoir positionner le contenu généré par rapport à eux. Nous positionnons ensuite absolument différents contenus générés en fonction de la validité ou non des données du formulaire : une coche verte ou une croix rouge, respectivement. Pour ajouter un peu d'urgence supplémentaire aux données invalides, nous avons également donné aux entrées une bordure rouge épaisse lorsqu'elles sont invalides.
Note :
Nous avons utilisé ::before pour ajouter ces étiquettes, car nous utilisions déjà ::after pour les étiquettes "requises".
Vous pouvez essayer ci-dessous :
Remarquez comment les champs de texte requis sont invalides lorsqu'ils sont vides, mais valides lorsqu'ils contiennent quelque chose. Le champ e-mail, en revanche, est valide lorsqu'il est vide, car il n'est pas requis, mais invalide lorsqu'il contient quelque chose qui n'est pas une adresse e-mail valide.
Spécifications
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Compatibilité des navigateurs
Loading…
Voir aussi
- Autres pseudo-classes liées à la validation :
- Apprendre : La validation des données d'un formulaire
- Accéder à l'état de validité en JavaScript