I. Traduction▲
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Using The :invalid CSS Pseudo Class.
II. Introduction▲
Avec l'HTML 5 viennent de nouveaux moyens de valider vos formulaires sans être obligé d'utiliser du JavaScript. Un de ces moyens est l'attribut required, qui vous permet de préciser quels éléments d'un formulaire sont obligatoire avant validation. Cela signifie que tant que vos éléments marqués comme « obligatoire » sont vides, la validation du formulaire ne s'effectue pas.
Il existe maintenant deux nouvelles pseudoclasses CSS qui viennent compléter le travail de l'attribut :required.
III. Les pseudoclasses « :invalid » et « :valid »▲
Vous disposez donc de deux nouvelles pseudoclasses CSS qui peuvent être utilisées en complément de l'attribut :required.
Ces deux classes servent à mettre en évidence quels éléments d'un formulaire sont valides ou non.
En effet, si votre élément HTML est valide, la classe :valid s'applique alors. À l'inverse, si l'élément n'est pas valide c'est la classe :invalid qui s'applique à l'élément.
IV. Support des navigateurs▲
La classe est actuellement supportée par les navigateurs suivants :
- Chrome 10 et versions supérieures ;
- Firefox 4.0 et versions supérieures ;
- Internet Explorer 10 ;
- Opera 10 ;
- Safari 5.0.
V. Exemple d'utilisation de la pseudoclasse :invalid▲
Dans cet exemple, nous allons montrer comment fonctionne la pseudoclasse sur un simple formulaire.
<style type="text/css">
:invalid {
background-color: #ffdddd;
}
:valid {
background-color: #ddffdd;
}
</style>
<form>
<label>Username</label><input type="text" />
<label>Email</label><input type="email" required />
</form>
Comme vous pouvez le voir avec cet exemple, la boite de texte « Email » est surlignée en rouge car l'attribut required indique que c'est un champ obligatoire, or il est vide.
VI. Conclusion▲
Nous avons vu dans ce tutoriel comment utiliser la pseudoclasse :invalid pour changer le style d'éléments de formulaire invalides.
VII. Remerciements▲
Je tiens à remercier Paul Underwood pour m'avoir autorisé à traduire son tutoriel.
Je remercie également Torgar pour sa relecture orthographique.