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" /> Input required

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

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+$" /> Input pattern

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>

Input custom validity

Types d’input

HTML5 arrive aussi avec des nouveaux types d’input qui contiennent donc des validations personnalisées comme <input type=“email” /> Input 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” /> Input number

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/