Utilisation des pseudo-classes CSS :valid et :invalid

Le HTML5 a permis d’assortir ses formulaires de contraintes. Elles permettent de valider le contenu directement en HTML, sans avoir forcement recourt au JavaScript. C’est supporté par la majorité des navigateurs depuis un bon moment.

Dans le même temps, deux nouvelles pseudo-classes CSS ont fait leur apparition. Elles offrent la possibilité d’appliquer des styles en fonction de la validation (ou non validation) du champ de formulaire. Voyons comment tout cela fonctionne !

Rien de bien nouveau sous l’horizon me direz-vous. Le but n’est pas ici de plonger dans les détails, d’autant plus que ce standard s’accompagne d’une API JavaScript qui permettra de mettre en place des choses encore plus puissantes. Comme je m’en suis servi récemment, je saisi l’occasion d’une expérience toute fraiche pour rapidement parler de l’usage des ces deux pseudo-classes.

Entrons dans le vif du sujet. :valid et :invalid ciblent tout élément de formulaire. Par exemple :

<input type="email" required>

Nous avons là un simple champ de formulaire de type email qui est rendu obligatoire (il ne peut être vide) par l’ajout de l’attribut required. Appliquons lui des styles.

input:focus:valid {
    border-color: #b3f3a2;
    box-shadow: 0 0 1px #b3f3a2;
}

input:focus:invalid {
    border-color: #f79c9c;
    box-shadow: 0 0 1px #f79c9c;
}

Rien de très sorcier, dès qu’un input reçoit le focus, son contour et son ombre sont verts si ce dernier est valide, rouges s’il est invalide. Simple et efficace, ces petits détails CSS permettent d’apporter du feedback visuel à l’utilisateur sans devoir déployer l’artillerie lourde.

Cependant, bien que tous les champs ne soient pas à valider, en l’absence de required ou de pattern, les champs sont considérés valides et sont automatiquement verts. Ce qui semble pour le moins indésirable… Il y a deux solutions à cela :

Dans ce second cas, une seconde pseudo-classe vient à notre rescousse, il s’agit de :required.

input:required:focus:valid, input[pattern]:focus:valid {
    border-color: #b3f3a2;
    box-shadow: 0 0 1px #b3f3a2;
}

input:required:focus:invalid, input[pattern]:focus:invalid {
    border-color: #f79c9c;
    box-shadow: 0 0 1px #f79c9c;
}

Ici, seuls les éléments ayant l’attribut required et/ou possédant un attribut pattern seront ciblés par nos styles. Simple, élégant et flexible. Que demande le peuple ?

– Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```