Comment utiliser la pseudoclasse CSS :invalid

Pour valider vos formulaires

Dans ce tutoriel nous allons voir comment utiliser la pseudoclasse CSS :invalid sur des éléments de formulaire.

12 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

 
Sélectionnez
<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>

Image non disponible

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.