L'attribut pattern

L'attribut pattern définit la validation d'un champ de formulaire HTML par expression régulière.

Les expressions régulières sont des commandes spéciales qui permettent de créer pratiquement toutes les règles de validation. Vous pouvez apprendre à les connaître dans le livre sur les expressions régulières PHP ou dans le livre sur les expressions régulières JavaScript.

Lors d'une tentative d'envoi du formulaire, si le champ avec cet attribut n'est pas rempli - le navigateur n'autorisera pas l'envoi du formulaire et affichera une erreur sous forme d'info-bulle. Malheureusement, le texte de l'erreur et son apparence ne peuvent pas être modifiés via HTML ou CSS.

Notez que la présence de l'attribut pattern ne vous dispense pas de vérifier la validité du formulaire côté serveur avec PHP (car la protection via l'attribut est facile à contourner).

L'attribut pattern doit être appliqué aux balises input ou textarea.

Exemple

Prenons la balise input et ajoutons l'attribut pattern, dans lequel nous mettrons une expression régulière vérifiant qu'un nombre à deux chiffres est saisi dans l'input (par exemple, 25).

Saisissez n'importe quel nombre et essayez d'appuyer sur le bouton pour envoyer le formulaire. Si un nombre autre qu'à deux chiffres est saisi, le navigateur n'autorisera pas l'envoi du formulaire et affichera un message d'erreur, sinon le formulaire sera envoyé :

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

Exemple . Champ vide

Dans l'exemple précédent, le navigateur affichait une erreur uniquement si le champ n'était pas vide (bien qu'un champ vide ne soit pas un nombre à deux chiffres). Essayons de faire en sorte que l'erreur soit également affichée pour un champ vide - en plus de l'attribut pattern ajoutons également l'attribut required :

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>

Voir aussi

l'attribut required,
qui permet de vérifier qu'un champ n'est pas vide