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).
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.
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.
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.
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é.
<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." />
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 :
<label for="nombrebillets">Nombre de billets :</label>
<input type="number" id="nombrebillets" name="nombrebillets" />
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.
<label for="rang">Rang : </label>
<inputtype="number" id="rang" name="rang" step="0.01" max="999.99">
<label for="appreciation">Appréciation :</label>
<input type="range" id="appreciation" name="appreciation" min="0" max="10" />
<label for="courriel">Courriel :</label>
<input type="email" id="courriel" name="courriel" />
<label for="telephone">Téléphone :</label>
<input type="tel" id="telephone" name="telephone" />
<label for="adresse">Adresse du site :</label>
<input type="url" id="adresse" name="adresse" />
<label for="rendezvous">Date du rendez-vous :</label>
<input type="date" id="rendezvous" name="rendezvous" />
<label for="heure">Heure :</label>
<input type="time" id="heure" name="heure" />
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 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.
...
<script>
let code = document.getElementById('code');
code.addEventListener('blur', validerCode);
</script>
</body>
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.
$(function() {
$('#code').blur(validerCode);
});
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.
$(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("");
}
});
});
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 :
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
// ...
});
});
▼Publicité
Site fièrement hébergé chez A2 Hosting.