:valid
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 :valid permet de cibler tout élément HTML <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·ice.
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 incluons des éléments <span> supplémentaires pour générer du contenu qui indique des données valides ou invalides :
<form>
<fieldset>
<legend>Formulaire de retour d'information</legend>
<p>Les champs obligatoires sont indiqués par « requis ».</p>
<div>
<label for="fname">Prénom : </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
<div>
<label for="lname">Nom : </label>
<input id="lname" name="lname" type="text" required />
<span></span>
</div>
<div>
<label for="email">
Courriel (inclure si vous souhaitez une réponse) :
</label>
<input id="email" name="email" type="email" />
<span></span>
</div>
<div><button>Envoyer</button></div>
</fieldset>
</form>
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
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