SELFHTML: JavaScript / Exemples d'application / Vérifier les saisies de formulaire

SELFHTML/Quickbar JavaScript Exemples d'application

	Vérifier les saisies de formulaire
	Vérifier les saisies de formulaire - l'exemple

Vérifier les saisies de formulaire - l'exemple

Exemple d'affichage: aperçu

Quand vous proposez sur le WWW des formulaires basés sur HTML, chaque utilisateur peut écrire une sottise quelconque dans le formulaire et l'envoyer ensuite. Avant tout concernés sont les champs de saisie à une ligne et les champs de saisie à plusieurs lignes. C'est la source de courriers électroniques superflus, ou bien c'est un script CGI traitant les entrées du formulaire qui sauvegarde ensuite des données vides ou inutilisables. À l'aide de JavaScript, vous pouvez vérifier les saisies d'un formulaire avant qu'il ne soit envoyé. Lors de saisies manquantes ou visiblement erronées, vous pouvez empêcher l'envoi du formulaire.

L'exemple de cette page montre comment une telle vérification fonctionne dans le principe. Suivant ce que contient votre formulaire, vous devez bien sûr compléter l'exemple.

Remarque: Pour une meilleure orientation dans l'exemple, celui-ci contient des liens aux explications respectives, par exemple: 1*. Ces liens ne font pas partie du code source. Si vous copiez cet exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple:

 <html>
 <head>
 <title>Titre de la page</title>
 <script language="JavaScript">
  <!--
  2* function verifform()
  {
   if(document.formulaire.nom.value == "")
    {
     alert("Veuillez entrer votre nom!");
     document.formulaire.nom.focus();
     return false;
    }
   if(document.formulaire.adresse.value == "")
    {
     alert("Veuillez entrer votre adresse!");
     document.formulaire.adresse.focus();
     return false;
    }
   if(document.formulaire.email.value == "")
    {
     alert("Veuillez entrer votre adresse électronique!");
     document.formulaire.email.focus();
     return false;
    }
   if(document.formulaire.age.value == "")
    {
     alert("Veuillez entrer votre âge!");
     document.formulaire.age.focus();
     return false;
    }
   if(document.formulaire.email.value.indexOf('@') == -1)
    {
     alert("Ce n'est pas une adresse électronique valable!");
     document.formulaire.email.focus();
     return false;
    }
   var chkZ = 1;
   for(i=0;i<document.formulaire.age.value.length;++i)
     if(document.formulaire.age.value.charAt(i) < "0"
     || document.formulaire.age.value.charAt(i) > "9")
       chkZ = -1;
   if(chkZ == -1)
   {
     alert("La mention de votre âge n'est pas un nombre!");
     document.formulaire.age.focus();
     return false;
    }
  }
  //-->
 </script>
 </head>
 <body>
 1* <form name="formulaire" action="mailto:et@toila.fr"
method=post onSubmit="return verifform()">
 <pre>
 nom:      <input type=text size=40 name="nom">
 adresse:  <input type=text size=40 name="adresse">
 E-Mail:   <input type=text size=40 name="email">
 âge:      <input type=text size=40 name="age">
 formulaire: <input type=submit value="envoyer"><input type=reset value="effacer">
 </pre>
 </form>
 </body>
 </html>

Explication:

définir un formulaire
Dans l'exemple est défini un formulaire HTML courant avec quelques champs de saisie, un bouton d'initialisation pour annuler le formulaire et un bouton d'envoi pour envoyer le formulaire. La seule particularité est l'instruction onSubmit="return verifform()" dans le repère d'ouverture <form>. L' Event-Handler onSubmit= est activé quand l'utilisateur clique sur le bouton d'envoi pour envoyer le formulaire. Ensuite, la fonction JavaScript verifform(), notée dans l'entête de fichier, est appelée. Si la fonction trouve des erreurs dans les saisies, elle renvoie la valeur false (faux), sinon, elle renvoie la valeur true (vrai). Avec return, cette valeur dans le repère d'ouverture <form> est renvoyée au navigateur. Le navigateur connaît les deux valeurs true et false. En relation avec onSubmit=, il réagit de telle façon qu'il n'envoie le formulaire que si la valeur est true. Si la valeur est false, l'envoi du formulaire est empêché.

vérifier le formulaire
La vérification proprement-dite du formulaire a lieu, dans l'exemple, dans la fonction verifform(), qui est notée dans l'entête de fichier. Dans l'exemple doit être vérifié pour chaque champ de formulaire s'il a un contenu, c'est à dire si l'utilisateur l'a rempli. Pour la mention de l'adresse électronique, il doit être en plus contrôlé si elle contient le signe @. Si ce n'est pas le cas, il est probable que l'utilisateur a saisi une absurdité dans le champ correspondant. Pour la mention de l'âge enfin, il doit en plus être vérifié qu'il s'agit d'un nombre positif entier. Autrement, il faut supposer qu'il y a là aussi quelque ineptie.

Avec une requête telle que if(document.formulaire.nom.value == ""), il est recherché si, dans le champ de formulaire correspondant (dans l'exemple le champ nommé nom dans le formulaire nommé formulaire), un contenu existe. La vérification se fait avec une chaîne de caractères "" vide.

Avec une requête telle que if(document.formulaire.email.value.indexOf('@') == -1), il est recherché si dans la saisie ne manque pas un signe déterminé (ici le signe @ qui est caractéristique des adresses électroniques).

Avec une expression telle que:
for(i=0;i<document.formulaire.age.value.length;++i)
if(document.formulaire.age.value.charAt(i) < "0"
|| document.formulaire.age.value.charAt(i) > "9")
il est recherché signe par signe si la valeur entrée ne contient rien d'autre que des chiffres. Si non, donc si l'utilisateur a entré d'autres caractères, une variable repère du nom de chkZ dans l'exemple est fixée à -1.

Pour toutes les requêtes de ce genre sont exécutées à chaque fois trois instructions, si les saisies de l'utilisateur ne satisfont pas au contrôle. D'abord, ce que l'utilisateur n'a pas ou mal rempli est sorti avec alert() dans une boite de dialogue. Dans la deuxième instruction, le curseur est positionné avec la méthode focus() sur l'élément de formulaire où se situe l'erreur ou l'omission. L'utilisateur peut alors de suite corriger son erreur. La troisième instruction enfin retourne la valeur false. Ce qui empêche l'envoi du formulaire.


après:	Boutons graphiques dynamiques
avant:	Compter les visites de pages personnelles avec des cookies

SELFHTML/Quickbar JavaScript Exemples d'application