Bonjour à tous,

Un petit article rapide à propos d’un sujet que je trouve formidable : la validation des formulaires via HTML5. En effet, HTML5 apporte de nouveaux moyens de s’assurer que ce que l’utilisateur envoie comme données est valide. Après, le principe de toujours se protéger de ce que l’utilisateur donne est toujours valable, HTML5 apporte juste une couche de validation qui permet de simplifier la vie de l’utilisateur.

Required

Premier attribut qui permet de valider que le champ est bien rempli <input type="text" required="required" />

Il est possible de spécifier l’attribut “title” pour afficher un message plus sympathique aux utilisateurs :

Firefox permet de spécifier le message d’erreur (ici celui de Chrome) via l’attribut “x-moz-errormessage” mais aucun parallèle n’existe chez ses concurrents à l’heure actuelle.

Pattern

Autre attribut très intéressant qui permet de définir l’expression régulière (type POSIX) pour valider le contenu d’un champ si il est rempli. Du coup, il faut en général combiner pattern et required. <input type="text" title="Ceci est un titre" pattern="^\d+$" />

Custom Validity

Il existe une chose encore qui est très sympathique : le CustomValidity :

<input id=“input” title=“Ceci est un titre” type=“text” /> <script type=“text/javascript”> var input = document.getElementById(“input”); input.addEventListener(“input”, function() { if (input.value < 3) { input.setCustomValidity(“Minimum is 4”); } }); </script>

Types d’input

HTML5 arrive aussi avec des nouveaux types d’input qui contiennent donc des validations personnalisées comme <input type=“email” />

Il y en a d’autres comme url, ou encore certains non encore disponibles sur Chrome comme date, datetime, search, tel, color etc, qui verrons probablement arriver des calendriers, des palettes de couleur, etc, allez savoir.

En attendant, il y a d’autres input spéciaux comme <input type=“number” min=“0” max=“10” step=“3” />

Où on peut définir des valeurs min/max et même un step (c’est à dire ici que l’on passe de 3 en 3).

Bon codage à tous !

Sources de cet article : http://stephenwalther.com/blog/archive/2012/03/13/html5-form-validation.aspx http://www.html5rocks.com/en/tutorials/forms/html5forms/