Valider un formulaire côté client

La validation d'un formulaire Web côté client est essentielle. C'est elle qui permet d'informer l'usager le plus rapidement lorsqu'il entre des informations invalides.

En fait, les éléments visuels devraient déjà avoir averti l'usager de certaines règles à suivre : astérisque (*) devant les informations obligatoires, texte indiquant le format attendu, taille des zones de texte pour indiquer la taille de ce qui est attendu, etc. Mais ces éléments visuels ne sont qu'indicatifs. Ils n'effectuent pas de validation.

La validation côté client peut être effectuée à l'aide d'attributs HTML ou à l'aide de JavaScript, avec ou sans jQuery.

▼Publicité

Si elle est essentielle, la validation côté client n'est cependant pas suffisante. En effet, un usager pourrait désactiver JavaScript sur son navigateur, ce qui ferait en sorte que les validations JavaScript n'auraient pas lieu. Quant à la validation à l'aide d'attributs dans les balises HTML, elle aura toujours lieu et ce, même si le JavaScript est désactivé. Cependant, il est possible de modifier ces attributs dans le navigateur, notamment en utilisant les outils de développement (F12) sous Chrome. Et plutôt que de supprimer un à un les attributs de validation des balises HTML, un usager malveillant pourrait ajouter l'attribut formnovalidate au bouton de soumission pour que la validation HTML n'ait pas lieu.

Une validation côté client doit donc toujours être accompagnée d'une validation côté serveur.

Validation à l'aide d'attributs HTML

La validation HTML est simple et efficace. Cependant, aucune validation HTML n'aura lieu avant que l'usager ne clique sur le bouton de soumission. Si vous souhaitez informer l'usager plus tôt qu'une donnée est invalide, il faudra se tourner vers une validation JavaScript.

Voici les principaux attributs HTML permettant de valider les données. Vous pourrez tester les exemples sur cette page de démonstration de balises HTML.

required

L'attribut required assure que la case de saisie ne puisse pas être laissée vide.

Si on appuie sur le bouton de soumission alors qu'un champ requis est à blanc, la soumission du formulaire n'aura pas lieu et un message sera automatiquement affiché.

Notez que l'attribut required peut être appliqué à différents types de champs : cases de saisie, boutons radio, cases à cocher, listes déroulantes, etc.

attribut required

maxlength

L'attribut maxlength permet de valider la longueur d'une chaîne de caractères. 

Une boîte de saisie avec un attribut maxlength n'affichera pas de message si la chaîne entrée comprend trop de caractères. Plutôt, elle empêchera la saisie des caractères supplémentaires lorsque la chaîne aura atteint la taille autorisée.

Une bonne pratique consiste à utiliser systématiquement l'attribut maxlength lorsque le contenu d'une boîte de saisie doit être enregistré dans un champ de la base de données dont la taille est limité.

pattern

L'attribut pattern permet de valider le format attendu à l'aide d'une expression régulière. Un message sera affiché si l'information entrée ne respecte pas le patron.

Aucune validation ne sera effectuée si le champ demeure vide.

HTML

<label for="codepostal">Code postal :</label>

<input type="text" id="codepostal" name="codepostal" placeholder="A9A 9A9" 

    pattern="^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy][0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz] ?[0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz][0-9]$" />

attribut pattern

type

Il existe de nombreux types pouvant préciser le comportement d'une balise input. Certains types jouent un rôle à la fois sur le format du contrôle et sur la validation des données. Certains autres n'affectent que l'un ou l'autre de ces aspects. 

Notez que pour les types permettant de valider les données, les validations n'auront lieu que si le champ contient de l'information. Un champ vide ne sera donc pas validé.

Voici les principaux types disponibles :

  • number : assure que la valeur entrée sera un nombre entier. Selon le navigateur, la case de saisie peut comporter des flèches permettant d'augmenter ou de diminuer la valeur saisie. Il est également possible d'entrer directement la valeur désirée. Un message apparaîtra si la valeur entrée n'est pas un nombre entier.
    HTML

    <label for="nombrebillets">Nombre de billets :</label>

    <input type="number" id="nombrebillets" name="nombrebillets" />

    Input type='number'

  • range : fait apparaître une échelle sur laquelle un curseur peut être déplacé. Malheureusement, même si on fournit les valeurs minimales et maximales pouvant être acceptées, l'usager n'a aucune indication de la valeur exacte correspondant à la position du curseur.
    HTML

    <label for="appreciation">Appréciation :</label>

    <input type="range" id="appreciation" name="appreciation" min="0" max="10" />

    Input type='range'

  • email : pour valider une adresse de courriel. Un message sera affiché si l'information entrée ne correspond pas à une adresse de courriel.
    HTML

    <label for="courriel">Courriel :</label>

    <input type="email" id="courriel" name="courriel" />

    Input type='email'

  • tel : contrairement à ce qu'on pourrait croire, ce type n'effectue aucune validation. Il n'affecte pas non plus l'apparence de la boîte de saisie. Cependant, sur un téléphone intelligent, le clavier basculera automatiquement au format numérique lors de la saisie d'un champ de ce type.
    HTML

    <label for="telephone">Téléphone :</label>

    <input type="tel" id="telephone" name="telephone" />

    Input type='tel'

  • url : valide si la chaîne entrée correspond à une URL.
    HTML

    <label for="adresse">Adresse du site :</label>

    <input type="url" id="adresse" name="adresse" />

    Input type='url'

  • date : affiche un calendrier. L'information saisie sera donc nécessairement une date.
    HTML

    <label for="rendezvous">Date du rendez-vous :</label>

    <input type="date" id="rendezvous" name="rendezvous" />

    Input type='date'

  • time : permet de saisir l'heure et les minutes. Il est possible d'entrer les valeurs souhaitées sans utiliser les flèches du contrôle mais il sera impossible d'entrer autre chose qu'une heure valide.
    HTML

    <label for="heure">Heure :</label>

    <input type="time" id="heure" name="heure" />

    Input type='time'

Validation à l'aide de JavaScript

Lorsque le langage HTML ne fournit pas les mécanismes pour effectuer la validation souhaitée, il est possible de se tourner vers JavaScript pour y remédier. On utilisera souvent la bibliothèque jQuery pour effectuer les validations puisqu'elle offre une syntaxe simplifiée.

La règle est toujours la même : on tentera d'avertir l'usager d'une entrée invalide le plus tôt possible. On privilégiera donc l'affichage d'un message ou d'un indicatif visuel avant même que l'usager ne clique sur le bouton de soumission. 

La fonction jQuery blur() permettra d'effectuer la validation dès que l'usager quitte un contrôle de saisie.

Voici quelques exemples de validation jQuery :

jQuery

$(function() {

    // validation du nom aussitôt qu'on quitte le contrôle de saisie

    $('#nom').blur(function() {

        if (!$(this).val()) {

            $('#validationnom').text("Vous devez entrer un nom");

        }

        else {

            $('#validationnom').text("");

        }

    });

    // validation de l'adresse

    $('#adresse').blur(function() {

        if ($(this).val().length < 10 || $(this).val().length > 50) {

            $('#validationadresse').text("L'adresse doit comporter entre 10 et 50 caractères");

        }

        else {

            $('#validationadresse').text("");

        }

    });

    // validation du code postal (ne peut pas contenir les lettres d, f, i, o, q, u et la première lettre ne peut pas non plus être w ni z).

    $('#codepostal').blur(function() {

        var codePostalRegExp = new RegExp("^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy][0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz] ?[0-9][ABCEGHJKLMNPRSTVWXYZabceghjklmnprstvwxyz][0-9]$");

        var codePostal = $(this).val();

 

        if (!codePostalRegExp.test(codePostal)) {

            $('#validationcodepostal').text("Le code postal n'est pas valide. Exemple de format valide : A9A 9A9. Certaines lettres ne peuvent pas faire partie du code postal.");

        }

        else {

            $('#validationcodepostal').text("");

        }

    });

});

Pour plus d'information

« Quick Tip: Easy form validation with HTML5 ». Tutorialzine.com. http://tutorialzine.com/2014/12/quick-tip-easy-form-validation-with-html5/

« jQuery RegEx Examples to use with .match() ». SitePoint. http://www.sitepoint.com/jquery-basic-regex-selector-examples/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories