JavaScript est le langage par excellence pour effectuer la validation d'un formulaire côté client.
Mais attention : cette validation n'a pour but que de fournir une rétroaction à l'usager rapidement. Elle n'est pas sécuritaire puisqu'il est possible de désactiver JavaScript et même d'ouvrir le code JavaScript et de le modifier.
La validation côté client doit toujours être accompagnée d'une validation côté serveur, par exemple en PHP.
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.
L'événement blur est celui qui survient à ce moment. Il pourra être utilisé avec addEventListener(). On peut aussi travailler avec la propriété onblur.
Mais il y a encore un mais : si l'élément n'a jamais reçu le focus, l'événement blur sur cet élément ne surviendra jamais.
Pour cette raison, on placera le code de validation dans une fonction et on appellera cette fonction sur le blur ET lors de la soumission du formulaire.
Prenons le cas d'un formulaire Web qui saisit un code.
Il faudra écrire une version adaptée de cette fonction pour chaque information saisie dans le formulaire, par exemple un nom, un courriel, une date.
let code = document.getElementById('code');
if (code != null) {
code.onblur = validerCode;
}
/**
* Valide le code et affiche le message d'erreur dans le DOM si non valide.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @return {bool} True si valide.
*/
function validerCode() {
let valide = false;
let messageErreur = '';
if (code != null) {
let valeur = code.value;
// si quelque chose a été entré comme valeur
if (valeur) {
// s'assurer que le texte ne déborde pas de la taille du champ dans la BD
if (valeur.length <= 4) {
valide = true;
}
else {
messageErreur = 'Le code ne doit pas comporter plus de 4 caractères.';
}
}
else {
messageErreur = 'Le code est requis.';
}
if (valide) {
// s'assurer qu'il n'y a plus de trace d'une erreur qui serait survenue avant
}
else {
// réagir à l'erreur ici
}
}
else {
console.log('Impossible de retrouver la case du code dans le formulaire.');
}
return valide;
}
Pour réagir à l'erreur, une technique intéressante consiste à entourer de rouge le contrôle en erreur et à afficher le message dans un élément ajouté au DOM directement sous le contrôle.
Lors de la soumission du formulaire, si les fonctions de validation de chaque balise de saisie ont été bien écrites, il suffit de les appeler une à une.
Dans le cas où au moins une donnée n'est pas valide, il faut annuler la soumission du formulaire à l'aide de event.preventDefault().
Ici, on valide un formulaire qui saisit un code et une description.
let formulaire = document.getElementById('mon-formulaire');
if (formulaire != null) {
formulaire.onsubmit = validerFormulaire;
}
/**
* Valide le formulaire.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* @param {Event} event Événement qui a déclenché l'appel de la fonction.
*/
function validerFormulaire(event) {
let codeValide = false;
let descriptionValide = false;
if (code != null) {
codeValide = validerCode();
}
if (description != null) {
descriptionValide = validerDescription();
}
if (!codeValide || !descriptionValide) {
event.preventDefault(); // ceci annule la soumission du formulaire
}
}
▼Publicité
