Formation PUB010 : PHP, 2022 La validation d'un formulaire Web

18.2 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 possible lorsqu'il entre des informations invalides. Son rôle est donc d'améliorer l'expérience utilisateur.

La validation côté client peut être effectuée à l'aide d'attributs HTML, à l'aide du JavaScript pur ou encore avec une bibliothèque JavaScript (ex: jQuery).

 

▼Publicité Le texte se poursuit plus bas

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 qui permettent de valider les données.

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ée.

pattern

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

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

Une bonne pratique consiste à préciser le format attendu à l'aide d'un attribut placeholder ou encore à l'aide d'un texte d'aide près de la case de saisie.

De plus, on ajoutera un attribut title pour préciser le message d'erreur lorsque le format requis n'est pas respecté.

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]$"

    title="Le code postal doit être au format A9A 9A9. Les lettres D, F, I, O, Q et U ne sont pas acceptées. Les lettres W et Z sont acceptées mais pas en première position." />

attribut pattern

type

Il existe de nombreux types pour 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 qui permettent 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'

    Pour un nombre décimal, l'attribut step indique le nombre de décimales et l'attribut max permet de limiter la partie entière. Il est possible d'entrer un point décimal ou une virgule décimale.

    HTML

    <label for="rang">Rang : </label>
    <inputtype="number" id="rang" name="rang" step="0.01" max="999.99">

  • 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 qui correspond à 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. Il est à noter que les validations ainsi faites sont très sommaires et ne garantissent pas que le courriel sera valide.
    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.

Validation dès que le contrôle perd le focus

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.

En JavaScript pur

La méthodde addEventListener permet de spécifier le nom d'une fonction qui sera exécutée lorsque l'événement en question surviendra.

Il est important de charger ce code juste avant le </body> afin d'assurer que tous les éléments HTML soient chargés au moment d'exécuter ces lignes de code.

JavaScript

    ...
    <script>
        let code = document.getElementById('code');
        code.addEventListener('blur', validerCode);
    </script>
</body>

Avec jQuery

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

Il est important de placer ces lignes de code entre $(function() { et }); afin d'assurer que tous les éléments HTML soient chargés au moment d'exécuter ces lignes de code.

jQuery

$(function() {

    $('#code').blur(validerCode);
});

Quelques exemples concrets

Voici quelques exemples de validation côté client.

Les exemples utilisent jQuery mais pourraient facilement être transposée en JavaScript pur.

Ils utilisent des fonctions anonymes mais pourrraient aussi utiliser des fonctions nommées, comme dans les extraits donnés plus haut.

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("");

        }

    });

});

Validation lors de la soumission du formulaire

La validation dès le contrôle perd le focus est une fonctionnalité très intéressante mais il faut savoir que cette validation n'aura pas lieu si le contrôle n'obtient jamais le focus. Ce sera le cas, par exemple, si un usager tente de soumettre un formulaire avant même d'avoir entré des données dans les contrôles.

C'est pourquoi on ajoutera également une validation qui se déclenchera lorsque le bouton de soumission est cliqué.

Puisque la même validation côté client sera faite lors de la perte de focus et lors de la validation, on placera le code dans une fonction qui sera appelée à deux moments différents.

Attention : dans le cas où les données ne sont pas valides, il faut se charger d'annuler la soumission du formulaire à l'aide de event.preventDefault().

Ex :

jQuery

function validerCode() {

    if (!$('#code').val()) {

        $('#validationcode').text("Vous devez entrer un code.");

        return false;

    }

    else {

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

        return true;

    }

}

 

// autres fonctions de validation définies ici

// ...

 

$(function() {

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

    $('#code').blur(validerCode);

 

    // traitement de la perte de focus des autres contrôles ici

    // ...

 

    // validation lors de la soumission

    $('#soumettre').click(function (event) {

        if (!validerCode()) {

            event.preventDefault();

        }

 

        // appel des autres fonctions de validation ici

        // ...

 

    });

});

 

Veuillez noter que le contenu de cette fiche vous est partagé à titre gracieux, au meilleur de mes connaissances et sans aucune garantie.
Par Christiane Lagacé
Dernière révision le 20 avril 2021
Merci de partager !

Site fièrement hébergé chez A2 Hosting.

Soumettre