| Alain Barraud | Mémento informatique |
Page ouverte le 10/06/2009
JavaScript - TD : vérification d'un formulaire
Vérifier qu'un formulaire est bien rempli est un grand classique en JS.
Cependant, cela a l'avantage d'être très agréable pour le visiteur, car s'il est mal rempli, le formulaire n'est pas envoyé. Ce qui signifie :
 |
Une vérification en JS n'est pas fiable, pour la simple et bonne raison qu'il est très facile de désactiver le JS ! |
Cependant, cela a l'avantage d'être très agréable pour le visiteur, car s'il est mal rempli, le formulaire n'est pas envoyé. Ce qui signifie :
- qu'on reste sur la page du formulaire : ĉa évite des redirections, et donc les temps de chargements qui vont avec (qui peuvent être longs si le serveur est saturé) ;
- que si on a oublié de remplir un champ, pas de risque d'être redirigé sur un formulaire vide (chose très agaĉante, surtout si on a passé beaucoup de temps à le remplir
- que l'utilisateur peut être prévenu qu'un champ est mal rempli dès qu'il a fini de le remplir.
Retour accueil JS
Sommaire partie 12
Briefing
Le formulaire à inspecter
Code : HTML
1 <form
2 <p>
3 Pseudo : <input
4 E-mail : <input
5 Age : <input
6 <input
7 </p>
8 </form>
action="page.php">2 <p>
3 Pseudo : <input
type="text" name="pseudo" /><br />4 E-mail : <input
type="text" name="email" size="30" /><br />5 Age : <input
type="text" name="age" size="2" /> ans<br />6 <input
type="submit" value="Valider" />7 </p>
8 </form>
Que faire si le formulaire est mal rempli ?
S'il est mal rempli, en plus de bloquer l'envoi, on va colorer les champs qui posent problème.
Pour ce faire, on va modifier la couleur d'arrière-plan. La fonction que nous allons utiliser pour cela est toute bête (voir chapitre sur le CSS en JS) :
Si le second paramètre vaut
Pour ce faire, on va modifier la couleur d'arrière-plan. La fonction que nous allons utiliser pour cela est toute bête (voir chapitre sur le CSS en JS) :
Code : JavaScript
1 function surligne(champ, erreur)
2 {
3 if(erreur)
4 champ.style.backgroundColor = "#fba";
5 else
6 champ.style.backgroundColor = "";
7 }
2 {
3 if(erreur)
4 champ.style.backgroundColor = "#fba";
5 else
6 champ.style.backgroundColor = "";
7 }
Si le second paramètre vaut
true, cette fonction colore le champ en rouge pâle. Sinon, elle enlève le coloriage.
|
Pour effacer le coloriage, il suffit de ne pas indiquer de couleur (en laissant les guillemets vides). Cela redonnera au champ sa couleur d'arri&egarve;re-plan par défaut. |
Au travail !
Fonctions à créer
On va créer :
- une fonction pour vérifier le pseudo (on vérifie juste la longueur : entre 2 et 25 caractères) ;
- une pour l'adresse e-mail (en utilisant de préférence une regex) ;
- une pour l'âge (on va dire qu'il doit être compris entre 5 et 111 ans) ;
- une méga-fonction (à partir des précédentes) qui vérifie tout.
true si c'est bon, et false si ça ne l'est pas.
Arguments des fonctions
Mettons-nous d'accord sur les arguments des fonctions.
Disons qu'elles auront chacune un seul paramètre :
Disons qu'elles auront chacune un seul paramètre :
- pour les trois premières, ce sera le champ à vérifier ;
- pour la méga-fonction, ce sera le formulaire lui-même.
|
Se rappeler du mot-clé this : il peut parfois s'avérer (très) pratique… |
Quand les appeler ?
Il faut bien sûr appeler la méga-fonction lors de la validation du formulaire, pour en bloquer l'envoi si besoin est.
Mais comme on veut que ce soit bien fait, lorsque l'utilisateur changera de champ, on vérifiera que le champ est correctement renseigné.
Mais comme on veut que ce soit bien fait, lorsque l'utilisateur changera de champ, on vérifiera que le champ est correctement renseigné.
Le pseudo
Vérification du pseudo…
La fonction
On veut donc simplement vérifier que la longueur est correcte : on disait entre 2 et 25 caractères.
En se rappelant qu'un champ texte a un attribut
En se rappelant qu'un champ texte a un attribut
value qui indique sa valeur, et qu'une chaîne de caractères possède l'attribut length pour en connaître le nombre de caractères, notre première fonction est très rapidement opérationnelle.
Code : JavaScript
1 function verifPseudo(champ)
2 {
3 if(champ.value.length < 2 || champ.value.length > 25)
4 {
5 surligne(champ, true);
6 return false;
7 }
8 else
9 {
10 surligne(champ, false);
11 return true;
12 }
13 }
2 {
3 if(champ.value.length < 2 || champ.value.length > 25)
4 {
5 surligne(champ, true);
6 return false;
7 }
8 else
9 {
10 surligne(champ, false);
11 return true;
12 }
13 }
Quand l'appeler ?
Il faut donc l'appeler une fois que l'utilisateur a fini de saisir son pseudo.
Se rappeler de l'évènement
Quant à l'argument, le mot-clé
Voici donc comment adapter notre champ :
Se rappeler de l'évènement
onBlur, déclenché lorsque le champ en question perd le focus (le curseur clignotant) : c'est lui qu'il faut utiliser ici.Quant à l'argument, le mot-clé
this convient parfaitement, puisque le champ à vérifier est justement celui qui vient de perdre le focus.Voici donc comment adapter notre champ :
Code : HTML
1 <input
type="text" name="pseudo" onblur="verifPseudo(this)" />
L'adresse e-mail
Peu de changements par rapport à la fonction précédente, il suffit de modifier la condition.
Pour la construction d'une regex vérifiant l'adresse e-mail, voir le chapitre sur les regex.
La regex que nous allons utiliser est la suivante :
Pour la construction d'une regex vérifiant l'adresse e-mail, voir le chapitre sur les regex.
La regex que nous allons utiliser est la suivante :