0

La validation de formulaire HTML5

Bonjour les amis !

Dans ce billet je vais vous faire un topo sur la validation HTML5 des formulaires. Véritable révolution dans le traitement de la validation, il n’en reste pas moins que cette technologie n’est pas compatible avec nos anciennes versions navigateurs.. Mais si, vous savez … ce truc qu’on nomme Internet Explorer.. notre pire ennemi :) !

Validation HTML5

L’attribut required

Si je vous parle de l’attribut required, vous allez me dire, oui bien sûr on connait. En effet la plupart des validations JS utilise cet attribut. Et bien HTML5 utilise exactement le même principe sauf qu’on ne charge plus de JS, la validation est directement incluse dans le navigateur.

Cela fonctionne avec tous les navigateurs récents, et IE10 pas en dessous malheureusement … Après il existe des petits scripts pour assurer la compatibilité.

<label for="email">Email *</label>
<input type="email" name="email" required="required" value="" />

Les patterns

L’attribut pattern, va vous permettre de passer une expression régulière pour vérifier la conformité de la saisie dans le champ.

Exemple pour un numéro de téléphone :

<label for="tel">Téléphone *</label>
<input type="tel" name="tel" required="required" pattern="[0-9]{10}" />

Explication du pattern – [0-9]{10} : Je demande un chiffre en 0 et 9, 10 fois.

Bon j’ai pensé à vous les amis. Voici un petit site qui vous donne les patterns les plus courant, pas besoin de se prendre la tête. http://html5pattern.com/

Concernant la compatibilité avec IE voici quelques scripts :

JQuery HTML5Form

H5 Validate

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.