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

SELFHTML/Navigationshilfen

JavaScript/DOM

Exemples d'application

Vérifier les saisies de formulaire

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

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.

Texte source avec explications

L'exemple montre le fichier HTML complet et le JavaScript destiné à vérifier les entrées de formulaire. Le formulaire en exemple appelle après avoir été envoyé avec succès un Script CGI sur le serveur de actuel.fr.selfhtml.org.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>V&eacute;rifier les saisies de formulaire</title>
<script type="text/javascript">
<!--
function verif_formulaire()
{
 if(document.formulaire.nom.value == "")  {
   alert("Veuillez entrer votre nom!");
   document.formulaire.nom.focus();
   return false;
  }
 if(document.formulaire.lieu.value == "") {
   alert("Veuillez entrer votre lieu de résidence!");
   document.formulaire.lieu.focus();
   return false;
  }
 if(document.formulaire.courriel.value == "") {
   alert("Veuillez entrer votre adresse électronique!");
   document.formulaire.courriel.focus();
   return false;
  }
 if(document.formulaire.courriel.value.indexOf('@') == -1) {
   alert("Ce n'est pas une adresse électronique!");
   document.formulaire.courriel.focus();
   return false;
  }
 if(document.formulaire.age.value == "") {
   alert("Veuillez entrer votre âge!");
   document.formulaire.age.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("Cette mention n'est pas un nombre!");
   document.formulaire.age.focus();
   return false;
  }
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE" text="#000000">

<h1>formulaire</h1>

<form name="formulaire" action="http://actuel.fr.selfhtml.org/cgi-bin/formview.pl" method="post" onSubmit="return verif_formulaire()">
<pre>
Nom:     <input type="text" size="40" name="nom">
Résidence:  <input type="text" size="40" name="lieu">
Courriel:   <input type="text" size="40" name="courriel">
Âge:    <input type="text" size="40" name="age">
formulaire: <input type="submit" value="Envoyer"><input type="reset" value="Interrompre">

Pour envoyer vous devez être connecté à Internet!
</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 verif_formulaire()" dans le repère d'ouverture <form>. Le gestionnaire d'événement onSubmit= est activé quand l'utilisateur clique sur le bouton d'envoi pour envoyer le formulaire. Ensuite, la fonction JavaScript verif_formulaire(), 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 verif_formulaire(), 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.courriel.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.


	Boutons graphiques dynamiques
	Compter les visites de pages personnelles avec des cookies

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application