Validation de formulaire :

Une règle de validation est une manière de s’assurer qu’un champ est correctement rempli, qu'il n'est pas vide et qu'il correspond bien à la demande.

Pour aider à la validation de formulaire, HTML5 a introduit de nouvelles fonctionnalités composées d'attributs afin d'améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur.
Le souci de ces attributs, c'est qu'ils sont assez limités, pour compléter et améliorer la performance de ces fonctionnalités, on va devoir utiliser JavaScript.

Pour exemple, l'un des éléments qui facilitent l'envoi de formulaire est l'attribut "required" ("requis" en français), il permet de rendre obligatoire le remplissage d'un champ et de bloquer la validation du formulaire si l'un des champs n'a pas été renseigné.
Cependant, si l’on rentre un espace dans le champ, il n’est plus considéré comme vide, car il contient bien un caractère et pour autant on ne peut pas dire qu’il soit correctement rempli, c'est pour cela que l'on va avoir recours au JavaScript.

L'attribut "required" est pris en charge pour les champs de saisie de type "text", "search", "password", "url", "tel", "email", "date", "datetime", "datetime-local", "month", "week", "time", "number", "checkbox", "radio", "file" et les balises <input>, <select> et <textarea>.

Auparavant, avant l'arriver de ces attributs, on devait utiliser JavaScript pour pouvoir vérifier si tout les champs étaient bien rempli, prenons l'exemple d'un champ de saisie de type "text", dans ce champ, on va demander un nom :

 <form>
    <!-- champ nom -->
    <label for="nom">Nom : </label>
    <input type="text" id="nom" name="nom" placeholder="Votre nom">
    <!-- bouton de validation -->
    <input type="submit" value="Envoyer">  
</form>

Pour vérifier si le champ “nom” n’est pas vide, à la soumission, nous allons donc écouter l’événement submit sur le formulaire, récupérer la valeur de ce champ puis réaliser notre test.

// on selectionne le formulaire avec sa balise "form" puis on écoute l'événement du bouton du formulaire
    document.querySelector('form').addEventListener("submit", (event) => {
        // ici, on empêche le comportement par défaut
        event.preventDefault();
        // On selectionne l'input avec son id et on enregistre sa valeur dans une variable.
        const valeurNom = document.getElementById('nom').value;
        // on affiche un message dans la console pour la vérification. 
        if (valeurNom === "") {
            console.log('Le champ nom est vide');
        } else {
            console.log('Le champ nom est rempli');
        }
        event.target.reset();
    });

Cette vérification est standard, le champ est-il vide ou est-il rempli, néanmoins, on se retrouve avec la même préoccupation que pour l'attribut HTML "required", si l'on rentre un espace, il sera considéré comme un caractère et le programme estimera qu'il est rempli, ce qui n'est pas vraiment le cas.
Pour remédier à ce désagrément, on va utiliser la méthode trim() qui permet de retirer les blancs en début et fin de chaîne, tels que les espaces, tabulations, espaces insécables, etc.

On va l'intégrer dans le code précédent lors de l'enregistrement de la valeur via la variable, comme cela, il supprimera automatiquement les espaces et autres tabulations autour de la chaîne à tester :

const valeurNom = document.getElementById('nom').value.trim();

On va pouvoir tester à nouveau avec la méthode trim(), je vous laisse constater le résultat par vous-même :

Maintenant, comment vérifier si la personne a bel et bien saisi un nom et pas n'importe quoi, comme des chiffres ou des caractères spéciaux ?
Pour cela, il existe parmi les nouvelles fonctionnalités "html", un attribut "pattern" ("modèle" en français) qui fonctionne avec des "regex" (expressions régulières).

Alors, sans vous faire un cours sur les "regex", car cela est très compliqué, je vais vous mettre un bout de code (et essayer de vous l'expliquer par la suite), on y inclut l'attribut "required" qui oblige à remplir le champ.

<input type="text" id="prénom" name="prénom" placeholder="Votre prénom" pattern="^[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+([\-][A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+)?" required>

Dans ce code, on a rajouté l'attribut "pattern" dans la balise <input>, cet attribut indique que le champ doit comporter un certain format défini par les "regex", s'il ne respecte pas le format demandé, le formulaire ne sera pas envoyé et on aura un message via une infobulle.
Une regex est chaîne de caractères comprenant des caractères et des métacaractères qui forment une combinaison.

Maintenant, je vais vous expliquer en grande ligne la "regex" :

^[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+([\-][A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+)?

Cette "regex" est composé en deux parties, la première qui va de l'accent circonflexe jusqu'au +, une seconde partie entre les parenthèses qui ressemble à la précédente, vous allez comprendre pourquoi par la suite.

L'accent circonflexe signifie que la chaîne doit commencer par ce qui suit, c'est-à-dire par l'un des caractères qui sont entre la première paire de crochets, dans ce cas de figure, par une lettre majuscule comprise entre A et Z ou une majuscule accentuée, ensuite le caractère suivant doit être l'un des caractères compris entre la seconde paire de crochets, c'est-à-dire une minuscule ou une minuscule accentuée, le "+" veut dire que l'expression précédente (qui est dans la seconde paire de crochets) peut être répétée une ou plusieurs fois, après le signe +, la deuxième partie, une série de paires de crochets regroupés par des parenthèses.

En fait, cette première partie sert de regex pour remplir un champ de saisie pour un prénom et comme tout prénom, il doit commencer par une majuscule suivie de minuscule.
Donc, dans cette seconde partie qui est presque identique, sert pour les prénoms composés, on retrouve dans la première paire de crochets le "trait d'union" il est échappé d'où l'antislash.
Ensuite, dans la seconde et troisième paire de crochets, la même combinaison que la première partie, puis vient le "?" qui veut dire que ce qui est entre parenthèses peut être répété de 0 ou 1, ce qui revient a dire qu'il peut être optionnel.

L'attribut "pattern" est pris en charge pour les champs de saisie de type "text", "search", "password", "url", "tel", "email", cependant, les types 'url" et "email" ont déjà un "pattern" inclus par défaut, par conséquent, il n'est pas nécessaire de l'utiliser, sauf pour améliorer son efficacité, car celui-ci reste quand même limité.

Ces nouveaux attributs sont une manière pratique pour informer les utilisateurs du site de ce que l'on veut, mais en termes de sécurité, ils sont totalement inefficaces.
En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML du site via l'inspecteur (touche F12) et de supprimer les "attributs" qu'il souhaite, dont ces fameux "pattern".
Voilà pourquoi, il est préférable d'utiliser le JavaScript seul ou en complément, car, contrairement au HTML, le javaScript n'est pas modifiable via le navigateur.

Voici un second exemple, cette fois-ci, on va se servire d'un code javaScript en supprimant les attributs html "pattern" et "required", voici le code html :

<form>
    <!-- champ nom -->
    <label for="nom"> Nom : </label>
    <input type="text" id="nom" name="nom" placeholder="Votre nom">
    <!-- bouton de validation -->
    <input type="submit" value="Envoyer">    	
</form>

Voici le code javaScript, pour vérifier que le champ ne soit pas vide, puis si un prénom est bien rentré et dans le format demandé :

/// On sélectionne le formulaire et on écoute l'événement "submit"
document.querySelector('form').addEventListener("submit", (event) => {
    event.preventDefault();  // On empêche l'envoi du formulaire (comportement par défaut)

    const champNom = document.getElementById('nom');  // On selectionne l'ID "nom" puis on l'enregistre dans une variable
    const trimmedValue = champNom.value.trim();  // On suprimme les espaces puis on enregistre dans une variable

     // On vérifie si le champ "nom" est vide ou non, s'il est vide, on affiche un message via une infobulle
    if (trimmedValue === "") {
        champNom.setCustomValidity("Veuillez compléter ce champ.");}

    // Si le champ est rempli, on vérifie son format, s'il ne correspond pas au format demandé, on affiche un message via une infobulle
    else if (!/^[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+(-[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+)?$/.test(trimmedValue)) {
        champNom.setCustomValidity("Veuillez modifier la valeur pour correspondre au format demandé.");} 
    
    // Si le champ est rempli et qu'il correspond au format demandé
    else {
        document.getElementById("result").innerHTML = trimmedValue;  // On selectionne l'ID "result" et on y affiche la valeur
        champNom.value = ''; // on vide le champ "nom"
        return;
    }
    // Affiche l'infobulle si nécessaire
    champNom.reportValidity();

    // On vide le message d'erreur de l'infobulle après un délai (ajusté à 2s pour visibilité)
    setTimeout(() => {
        champNom.setCustomValidity("");
    }, 2000);
});

Dans cet exemple, on s'est servi de "setCustomValidity", c'est une méthode JavaScript qui permet de définir un message d'erreur personnalisé, cela fonctionne pour un élément de formulaire HTML tel un champ de saisie (input), un textarea ou un select.
Cependant, pour afficher ce message, on devra se servir de "reportValidity", c'est cette méthode javaScript qui va permettre de vérifier et d'afficher les messages en fonction des erreurs via une infobulle.
On s'est également servi de la méthode "test" qui permet de vérifier s'il y a une correspondance entre un texte et une "regex"

Vous pouvez tester vous même ci-dessous :

Ici, on inclut un code pour la vérification de l'envoi :

<p class="box">Votre nom est :  <span id="result"></span></p>

Votre prénom est :

En conclusion, cette méthode en JavaScript est plus sécurisée, car, comme dit précédemment, le javaScript n'est pas modifiable via le navigateur, mais, il existe des extensions pour navigateur qui désactivent le javaScript.
Donc, il faudra faire une seconde vérification en langage serveur lors de l'envoi du formulaire.

~~ fin ~~