• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

TD : vérification d'un formulaire

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vérifier qu'un formulaire est bien rempli est un grand classique en JS.
Vous n'allez donc pas y échapper :pirate:

Rassurez-vous cependant, il n'y a rien de bien compliqué derrière cela : une fois ce TD terminé, les vérifications de formulaires n'auront plus aucun secret pour vous. :)

Ceci dit, elle 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 vous avez oublié de remplir un champ, pas de risque d'être redirigé sur un formulaire vide (chose très agaçante, surtout si vous avez 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.

Autant de bonnes raisons de mettre en place une pré-vérification en JS (et donc de faire ce TD :D ).

Briefing

Le formulaire à inspecter

Rentrons sans plus attendre dans le vif du sujet.
Votre mission, si vous l'acceptez :zorro: , empêcher ce formulaire d'être envoyé s'il est mal rempli :

<form action="page.php">
  <p>
    Pseudo : <input type="text" name="pseudo" /><br />
    E-mail : <input type="text" name="email" size="30" /><br />
    Âge : <input type="text" name="age" size="2" /> ans<br />
    <input type="submit" value="Valider" />
  </p>
</form>

Il est très simple, et si vous savez vérifier un pseudo, une adresse e-mail et un âge, alors le reste ne devrait pas vous poser de souci. :)

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 (c'est quand même mieux de dire à l'utilisateur pourquoi le formulaire n'est pas envoyé :-° ).

Pour ce faire, on va modifier la couleur d'arrière-plan. La fonction que nous allons utiliser pour cela est toute bête (pour peu que vous ayez lu le chapitre sur le CSS en JS) :

function surligne(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#fba";
   else
      champ.style.backgroundColor = "";
}

Si le second paramètre vaut true, cette fonction colore le champ en rouge pâle. Sinon, elle enlève le coloriage.

À vous !

Fonctions à créer

Sur ce, à vous de 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.

Les trois premières fonctions doivent, en plus de colorer le champ, renvoyer 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 :

  • pour les trois premières, ce sera le champ à vérifier ;

  • pour la méga-fonction, ce sera le formulaire lui-même.

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 vous aimez les choses bien faites, lorsque l'utilisateur changera de champ, vous allez vérifier que le champ est correctement renseigné.

Au travail, moussaillons ! :pirate:

Le pseudo

Commençons la correction par la vérification du pseudo...

La fonction

On veut donc simplement vérifier que la longueur est correcte : nous disions entre 2 et 25 caractères.

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.

function verifPseudo(champ)
{
   if(champ.value.length < 2 || champ.value.length > 25)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

Quand l'appeler ?

Il faut donc l'appeler une fois que l'utilisateur a fini de saisir son pseudo.
Rappelez-vous 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 :

<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, je vous renvoie au chapitre sur les regex, tout y est expliqué.
La regex que nous allons utiliser est la suivante :
/^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/

La fonction

Nous allons utiliser la méthode test(str) de l'objet RegExp pour vérifier que l'adresse e-mail satisfasse bien la regex ci-dessus.

function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

L'appel de la fonction

Ici, c'est exactement comme pour le pseudo :

<input type="text" name="email" size="30" onblur="verifMail(this)" />

L'âge

La fonction

Pour contrôler l'âge, il faut avant tout le convertir en entier (grâce à parseInt) pour pouvoir le comparer aux âges limites, en n'oubliant pas de vérifier qu'il s'agisse bien d'un nombre (avec isNaN).

function verifAge(champ)
{
   var age = parseInt(champ.value);
   if(isNaN(age) || age < 5 || age > 111)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}

Appel de la fonction

Comment ça, on l'a déjà fait deux fois ? :-°

<input type="text" name="age" size="2" onblur="verifAge(this)" />

Tout vérifier avant l'envoi

Bien, il ne nous reste maintenant plus qu'à assembler les morceaux.

La méga-fonction

Notre méga-fonction ne fait qu'appeler nos trois fonctions et renvoyer true si tout est bon.
Le seul moment où il va falloir solliciter un peu vos neurones, c'est pour passer en arguments les champs.

function verifForm(f)
{
   var pseudoOk = verifPseudo(f.pseudo);
   var mailOk = verifMail(f.email);
   var ageOk = verifAge(f.age);
   
   if(pseudoOk && mailOk && ageOk)
      return true;
   else
   {
      alert("Veuillez remplir correctement tous les champs");
      return false;
   }
}

Pourquoi ne pas mettre simplement la condition suivante ?

if(verifPseudo(f.pseudo) && verifMail(f.email) && verifAge(f.age))

Vous vous êtes peut-être demandé pourquoi nous avons créé des variables apparemment inutiles...

La raison, quelque peu subtile, est la suivante : si le pseudo est incorrect, verifPseudo(f.pseudo) va renvoyer false.
La condition ("Le pseudo est correct ET l'e-mail est correcte ET l'âge est correct") sera donc forcément fausse, que les autres champs soient bien ou mal remplis.
Le navigateur, partant de ce principe, ne va donc pas exécuter les deux fonctions (puisque elles ne changent rien à la condition).
Du coup, les autres champs ne seront pas colorés s'ils sont mal remplis.

C'est pourquoi on utilise ces trois variables qui peuvent sembler superflues : elles forcent le navigateur à exécuter les trois fonctions.

Autoriser ou bloquer l'envoi ?

Bonne nouvelle, c'en est presque fini !

Voici donc la modification à effectuer pour bloquer l'envoi si le formulaire est mal rempli :

<form action="page.php" onsubmit="return verifForm(this)">

Le formulaire final

Terminons ce TD par un petit récapitulatif du formulaire que nous avons obtenu :

<form action="page.php" onsubmit="return verifForm(this)">
  <p>
    Pseudo : <input type="text" name="pseudo" onblur="verifPseudo(this)" /><br />
    E-mail : <input type="text" name="email" size="30" onblur="verifMail(this)" /><br />
    Âge : <input type="text" name="age" size="2" onblur="verifAge(this)" /> ans<br />
    <input type="submit" value="Valider" />
  </p>  
</form>

Sans oublier les fonctions JS que nous avons définies :

  • surligne

  • verifPseudo

  • verifEmail

  • verifAge

  • verifForm

Alors ?
Vous voyez, ce n'était pas si difficile que ça. ^^
Il est important que vous compreniez bien le principe de ce TD, c'est une utilisation très courante du JS.

Exemple de certificat de réussite
Exemple de certificat de réussite