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 :

• appliquer ces styles uniquement sur des champs ayant une classe spécifique, par exemple .validate,
• estimer que seuls les champs required ou qui possède un attribut pattern sont à valider.

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 ?