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.
Pour info :
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 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).
<input type="text" id="nom" name="nom" placeholder="Votre nom" pattern="^[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+([\-][A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+)?">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.
Un 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 le "regex" :
^[A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+([\-][A-ZÇÀÄÂÉÈÊËÏÎÔÖÛÙÜÆŒ][a-zàâéèëêïîôöùüûçæœ]+)?Ce "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.
Pour info :
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 sont efficacité, car celui si reste quand même limité.