Beaucoup plus simple et rapide à mettre en œuvre que le JavaScript, la syntaxe HTML5 permet la validation des données saisies dans un formulaire grâce à l’attribut pattern. Cela permet de toucher également les personnes qui désactivent le JavaScript. Seul inconvénient : il faut que l’utilisateur utilise un navigateur récent.

Il faut pour cela renseigner l’attribut pattern, avec en valeur une expression régulière qui correspond à la donnée censée être saisie. Les expressions régulières, regexp pour les intimes sont parfois tordues, je vais donc vous donner les plus courantes pour vous faciliter la tâche.

A noter également l’attribut placeholder qui permet de donner une indication de saisie à l’utilisateur sans pour autant devoir mettre une valeur, ni utiliser JavaScript. SI vous voulez rendre obligatoire un champs vous pouvez ajouter tout simplement required, le navigateur se chargera du reste.

Code postal français

Il s’agit ici de valider une chaine avec 5 chiffres allant de 0 à 9
Code postal

<input pattern="[0-9]{5}" type="text"  placeholder="ex : 37000"/>

Numéro de téléphone français

10 chiffres avec un 0 au début et pas en 2ème place
Tel

<input pattern="0[1-9][0-9]{8}" type="text" placeholder="ex : 0153322327"/>

Email

Une série de caractères, un @, un domaine et son extension. Pour faire encore plus simple, il suffit de changer le type de champs :

<input type="email" placeholder="Ex : lui@moi.fr" />

Regex personnalisées

Vous pouvez également construire vos expressions personnalisées :

• [a-z] : que des lettres minuscules
• [0-9] : que des chiffres
• [a-zA-Z] : lettre minuscules ou majuscules
• [a-z0-9_-] : que des minuscules, chiffres, underscore ou trait d’union
• [0-9]{5} : 5 chiffres obligatoirement
• [0-9]{2,10} : entre 2 et 10 chiffres

Couleur HTML hexadécimal

Moins simple, il s’agit de commencer par un # suivi d’une valeur hexadécimal de 3 ou 6 caractères. Le caractère pipe « | » fait office de ou.

Couleur

<input pattern="#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}" type="text" placeholder="ex : #74AFB8" />

Et vous, quelles sont vos règles indispensables ?