Validation de formulaire en HTML 5

Posté par
|

Les dernières versions de Google Chrome (16+), Mozilla Firefox (8+) et Internet Explorer (10+) supportent tous la validation côté client des formulaires. Il faudra commencer à prendre le HTML 5 au sérieux maintenant. Le but sera donc aujourd’hui de vous démontrer comment vous pouvez tirer profit de cette validation côté client. Les spécifications du HTML5 offrent plusieurs attributs que vous pouvez utiliser avec des éléments input pour effectuer la validation côté client, y compris les attributs standard : required, pattern, min, max, step, et maxlength.

Par exemple, vous utilisez l’attribut required pour obliger l’utilisateur à entrer une valeur pour un élément input. Le formulaire ci-dessous montre comment vous pouvez faire qu’un champ soit requis.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Requis</title>
</head>
<body> 
    <form>
        <label>
            Prénom:
            <input required title="Le prénom est requis!" />
        </label>
        <label>
            Nom:
            <input required title="Le nom est requis!" />
        </label>
        <button>Soumettre</button>
    </form> 
</body>
</html>

Si vous tentez de soumettre le formulaire et que vous omettez le nom ou le prénom vous verrez le message d’erreur de validation :

Noter que la valeur de l’attribut title est utiliser pour afficher le message d’erreur de validation « Le prénom est requis! ». L’attribut title ne fonctionne pas de cette façon avec la version actuelle de Firefox. Si vous souhaitez afficher un message d’erreur de validation personnalisée avec Firefox, il vous faut inclure un attribut x-moz-errormessage comme ceci:

<input required title="Le prénom est requis!" x-moz-errormessage="Le prénom est requis!" />

L’attribut pattern vous permet de valider la valeur d’un élément input à l’aide d’une expression régulière. Par exemple, le formulaire ci-dessous comprend un champ de numéro de sécurité sociale qui comprend un attribut pattern:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pattern</title>
</head>
<body> 
    <form>
        <label>
            Numéro de sécurité social:
            <input required pattern="^\d{3}-\d{3}-\d{3}$" title="###-###-###" />
        </label>
        <button>Soumettre</button>
    </form> 
</body>
</html>

L’expression régulière sous la forme ci-dessus nécessite un numéro de sécurité sociale correspondant au modèle ###-###-###.

Remarquer que le champ d’entrée comprend à la fois un motif et un attribut de validation requis. Si vous n’entrez pas de valeur, l’expression régulière n’est jamais déclenchée. Vous devez inclure l’attribut required afin de forcer un utilisateur à entrer une valeur et provoquer la validation de cette dernière.

Validation personnalisée

Vous pouvez profiter de l’HTML5 pour effectuer des validations personnalisées. La seule exigence est que vous écrivez une fonction JavaScript. Par exemple, lors de la réservation une chambre d’hôtel, vous voudrez peut-être valider que la Date d’arrivée est dans le futur au lieu du passé:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Constraint Validation API</title>
</head>
<body> 
    <form>
        <label>
            Date d'arrivé:
            <input id="arrivalDate" type="date" required />
        </label>
        <button>Soumettre la réservation</button>
    </form>
 
    <script type="text/javascript"> 
        var arrivalDate = document.getElementById("arrivalDate");
  
        arrivalDate.addEventListener("input", function() {
            var value = new Date(arrivalDate.value);
            if (value < new Date()) {
                arrivalDate.setCustomValidity("Date d'arrivée doit être postérieure à maintenant!");
            } else {
                arrivalDate.setCustomValidity("");
            } 
        }); 
    </script> 
</body>
</html>

Le formulaire ci-dessus contient un champ de saisie du nom arrivalDate. Saisir une valeur dans le champ arrivalDate déclenche l’événement d’entrée. Le code JavaScript ajoute un écouteur d’événements pour l’événement d’entrée et vérifie si la date inscrite est plus grande que la date actuelle. Si la validation échoue, alors le message d’erreur de validation « Date d’arrivée doit être postérieure à maintenant! » est attribué à la zone de saisie arrivalDate en appelant la méthode de l’API de validation setCustomValidity(). Sinon, le message d’erreur de validation est désactivé en appelant setCustomValidity() avec une chaîne vide.

Validation HTML5 et les anciens navigateurs

Mais qu’en est-il des navigateurs plus anciens? Par exemple Safari et les versions de Microsoft Internet Explorer antérieures à Internet Explorer 10 ? Ce dont le monde a vraiment besoin est un plugin jQuery qui offre une compatibilité en arrière pour les attributs de validation HTML5. Si un navigateur prend en charge la validation HTML5 le plugin ne ferait rien et sinon, le plugin ajouterait le support pour les attributs.

Malheureusement, pour autant que je sais, ce plugin n’existe pas. Je n’ai pas été en mesure de trouver un plugin qui prend en charge les attributs à la fois nécessaires et le modèle pour les anciens navigateurs.

Il existe plusieurs plugins jQuery qui fournissent un soutien partiel pour les attributs de validation HTML5:

Le plugin jQuery Validation, la bibliothèque de validation le plus populaire en JavaScript, prend en charge l’attribut HTML5 required, mais il ne supporte pas l’attribut pattern du HTML5. Pareil pour le plugin html5Form qui ne supporte pas l’attribut pattern.

Le plugin h5Validate fournit le meilleur support pour les attributs de validation HTML5. La page suivante illustre comment ce plugin supporte à la fois required et pattern :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>h5Validate</title>
    <style type="text/css">
        .validationError {
            border: solid 2px red;
        }
        .validationValid {
            border:  solid 2px green;
        }
    </style>
</head>
<body>
    <form id="customerForm">
        <label>
            Prénom:
            <input id="firstName" required />
        </label>
        <label>
            Numéro de sécurité social:
            <input id="ssn" required pattern="^\d{3}-\d{3}-\d{3}$"
                title="Expected pattern is ###-###-###" />
        </label>
        <input type="submit" />
    </form>
 
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.h5validate.js"></script>
    <script type="text/javascript">
 
        // h5Validate plugin
        $("#customerForm").h5Validate({
            errorClass: "validationError",
            validClass: "validationValid"
        });
 
        // Prévient la soumission du formulaire en cas d'erreur
        $("#customerForm").submit(function (evt) {
            if ($("#customerForm").h5Validate("allValid") === false) {
                evt.preventDefault();
            }
        }); 
    </script> 
</body>
</html>

Quand un champ de saisie de validation échoue, la classe css validationError est appliquée au champ de saisie et le champ apparaît avec une bordure rouge. Quand un champ d’entrée passe de validation, la classe CSS validationValid est appliquée et le champ apparaît avec une bordure verte.

Du point de vue de la validation HTML5, le plugin h5Validate est le meilleur des plugins. Il ajoute le support pour les attributs required et pattern aux navigateurs qui ne supportent pas nativement ces attributs tels que IE9. Cependant, voici quelques informations additionnelles:

  • Le plugin devrait se désactiver lorsqu’il est utilisé avec un navigateur qui supporte nativement les attributs de validation HTML5. Le plugin ne devrait pas être trop gourmand – il ne devrait pas gérer la validation lors d’un navigateur pourrait faire le travail lui-même.
  • Le plugin doit simuler la même interface utilisateur pour afficher des messages d’erreur de validation que l’interface utilisateur affiché par les navigateurs qui supportent nativement la validation HTML5.
  • Enfin, le plugin devrait ajouter le support pour la méthode setCustomValidity() et les autres méthodes de l’API de validation HTML 5. De cette façon, vous pourriez mettre en œuvre une validation personnalisée d’une manière compatible avec les normes et vous sauriez que cela va fonctionné dans tous les navigateurs à la fois anciens et nouveaux.

Ajouté un commentaire


quatre × = 12