Formulaires HTML5 : placeholder, required, pattern et validation

Les champs requis non complétés ou ne respectant pas une certaine règle de syntaxe définie par le type du formulaire, ou par l'attribut pattern bloquent le processus d'envoi des données d'un formulaire.

Cette validation à la volée permet à l'utilisateur d'être informé très rapidement de ses erreurs et de les corriger étape par étape grâce aux indications fournies par les infobulles situées sous chacun des champs invalides.

Aperçu d'un champ requis après validation sur Chrome

Mise en place d'un pattern

Des patterns par défaut existent pour certains types de champ, comme les champs de type email ou url par exemple, qui attendent des formats spécifiques.
Voir également : Nouveaux champs de formulaire HTML5

D'autres patterns - ou masques - peuvent être créés sur-mesure, grâce à l'attribut pattern qui accepte une expression régulière.

<input type="text" pattern="[A-F][0-9]{5}">

Ce champ attend une valeur numérique d'au moins 5 chiffres précédés d'une lettre majuscule comprise entre A et F.
Si le format n'est pas respecté, le navigateur en informe l'utilisateur.

Démonstration

Éléments compatibles

L'attribut pattern peut être placé uniquement sur l'élément <input>  ayant pour types text, search, password, url, tel, email.

Styler le statut d'un champ avec :valid et :invalid

CSS3 prévoit deux pseudo-classes que sont :valid et :invalid afin de marquer clairement les champs... valides et invalides.
Il est alors possible d'écraser les styles par défaut appliqués à ces éléments par les navigateurs, qui différent :

• Firefox attribue la propriété box-shadow (rouge) au champ.
• Internet Explorer utilise la propriété border-color (rouge).
• Chrome et Opera n'ajoutent aucun style, mais placent le focus sur le premier champ erroné.

Par défaut, aucun style particulier n'est appliqué lorsque le pattern est respecté.
Il suffit d'appliquer ces styles pour que cela change :

:valid {
   box-shadow: 0 0 2px 1px green;
}

Démonstration

Compatibilité de l'attribut pattern

Navigateurs	Versions
	Firefox 4.0+
	Opera 9.5+
	Chrome 3.0+
	Internet Explorer 10+