Aller au menu - Aller au contenu

Icône TD : vérification d'un formulaire

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 765 sur ce chapitre classé 38/786
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. :)


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 !


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 ).
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 :

Code : HTML
1
2
3
4
5
6
7
8
<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) :

Code : JavaScript
1
2
3
4
5
6
7
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.

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ère-plan par défaut. :)



À 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.


Conseil du jour :soleil:
Rappelez-vous 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 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:
Retour en haut

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.

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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 :
Code : HTML
1
<input type="text" name="pseudo" onblur="verifPseudo(this)" />
Retour en haut

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.

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 :
Code : HTML
1
<input type="text" name="email" size="30" onblur="verifMail(this)" />
Retour en haut

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).

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 ? :-°

Code : HTML
1
<input type="text" name="age" size="2" onblur="verifAge(this)" />
Retour en haut

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.

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 ?
Code : JavaScript
1
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.

On nomme parfois ce comportement une "évaluation paresseuse" du ET.
On se retrouve dans un cas semblable avec un OU si le premier membre est vrai : dans ce cas, la condition ("premier membre OU second membre") est nécessairement vraie, et les fonctions du second membre ne sont pas exécutées.




Autoriser ou bloquer l'envoi ?




Bonne nouvelle, c'en est presque fini !

Petit rappel : pour autoriser ou bloquer l'envoi, il suffit de renvoyer true ou false lorsque le formulaire est envoyé :
Code : HTML
1
<form [..] onsubmit="return false">



Voici donc la modification à effectuer pour bloquer l'envoi si le formulaire est mal rempli :
Code : HTML
1
<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 :
Code : HTML
1
2
3
4
5
6
7
8
<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
Retour en haut
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.

Au risque de me répéter, cette vérification n'est pas fiable.
Elle précède, mais ne remplace pas une vérification des données côté serveur (en PHP par exemple).
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
18 commentaires pour "TD : vérification d'un formulaire"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne Stefou06 # Posté le 21/05/2010 à 14:21:02
Développeur = Artiste
Avatar

Études : ITII - PACA

 Salut à tous,

Déjà merci pour ce tuto José2 car, même si j'ai eut quelques difficultés par moments pour avancer, j'ai quand même pu y arriver grâce à tes infos.

Pour ceux qui n'ont pas réussi à joindre les 2 bouts sur ce tuto je vous fait suivre les codes complets JS et XHTML ;)

- J'ai rajouté le champs téléphone,
- J'ai pris en compte la remarque de "jojo jumper" dans le code de l'age
- J'ai rajouter un bout de code pour ne pas que le JS envoi des messages disant que le formulaire est mal rempli, dans le cas ou le champ est vide ;)
- J'ai aussi coloré le champ validé en jaune ;)

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Verif formulaire</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="verif formulaire" href="verifFormulaire.css" />
   </head>   
   
   <body>
	
	<h1> TP vérifier un formulaire <h1/>
	
	<script type="text/javascript" src="verifFormulaire.js"></script>
	
	<form methode="post"action="page.php" onsubmit="return verifier(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 />
			TelFR : <input type="text" name="telFR" size="10" onblur="verifTelFR(this)" /><br />
			<input type="submit" value="Valider" />
		 </p>
	</form>	
     
   </body>
</html>


Code : JavaScript
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
/*verifFormulaire.js
--------- 
Par Stefou06
Fichier créé le 21/05/2010
*/

var ageRegex = new RegExp (/^\d{1,3}$/); // Entre 1 et 3 chiffres
var mailRegex = new RegExp (/^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/); // Typique e-mail
var pseudoRegex = new RegExp (/^[a-zA-Z0-9_-]{2,25}$/); // on vérifie juste la longueur : entre 2 et 25 caractères
var telRegex = new RegExp (/^(0[1-68])(?:[ _.-]?(\d{2})){4}$/); // Numero francais ( portable compris)


function verifier(f)
{
	var ageOK = verifAge(f.age);	// recupération résultat du test sur l'age
	var mailOK = verifMail(f.email);
	var pseudoOK = verifPseudo(f.pseudo);
	var telFROK = verifTelFR(f.telFR);
	var result = false;
	
	if (ageOK && mailOK && pseudoOK && telFROK ) // si tout est OK
	{
	result=true;
	alert(" Formulaire OK pour l'envoi");
	}
	else
	{
	result=false;
	alert(" Veuillez remplir le formulaire correctement avant de l'envoyer");
	}
	return result;
}

function verifAge(champ)
{
	var sonAge = parseInt(champ.value);	// conversion en chiffre
	var result = ageRegex.test(sonAge);	// test sur RegExp
	var chiffreUniquement;	// pour eviter d'oublier un caractere autre qu'un chiffre ( du a parseInt() )
	var ageRempli = champRempli(champ); // false si le champ n'est pas rempli
	
	// Test si il n'y a pas de caractere autre qu'un chiffre
	for(i=0;i<champ.value.length;++i)
	{
	   if(champ.value.charAt(i) < "0" || champ.value.charAt(i) > "9")
	   {
			chiffreUniquement = false;	// NOK
	   }
	   else
	   {
			chiffreUniquement = true;	// OK
	   }
	}
	
	if (ageRempli)	// evite de dire que le formulaire est mal rempli si on le laisse vide et qu'on change de champ
	{
		if ( isNaN(sonAge) || (sonAge < 5) || (sonAge > 111) || !result || !chiffreUniquement )
			{
			result = false;
			alert(champ.value + " ans est un age incorrect");
			surligneErreur(champ, true);	// erreur
			}
		else
			{
			surligneErreur(champ, false);	// pas d'erreur
			}	
		return result;
	}
	else
	{
		champ.style.backgroundColor = "";
	}
}


function verifMail(champ)
{
	var result = mailRegex.test(champ.value);
	var mailRempli = champRempli(champ); // false si le champ n'est pas rempli
	
	if (mailRempli)	// evite de dire que le formulaire est mal rempli si on le laisse vide et qu'on change de champ
	{
		if (result)
			{		
			surligneErreur(champ, false); // pas d'erreur 
			}
		else
			{
			alert(champ.value + " : ce mail est incorrect");
			surligneErreur(champ, true);	// erreur
			}
		return result;
	}
	else	// Si le champ n'est pas rempli on laisse la couleur de base
	{
		champ.style.backgroundColor = "";
	}
	
}


function verifPseudo(champ)
{
	var result = false;
	var pseudoRempli = champRempli(champ); // false si le champ n'est pas rempli
	
	if (pseudoRempli)	// evite de dire que le formulaire est mal rempli si on le laisse vide et qu'on change de champ
	{
		if (result = pseudoRegex.test(champ.value))
			{		
			surligneErreur(champ, false);
			}
		else
			{
			alert(champ.value + " : ce pseudo est incorrect");
			surligneErreur(champ, true);
			}
		return result;
	}
	else // Si le champ n'est pas rempli on laisse la couleur de base
	{
		champ.style.backgroundColor = "";
	}
}


function verifTelFR(champ)
{
	var result = false;
	var telFRRempli = champRempli(champ); // false si le champ n'est pas rempli
	
	if (telFRRempli)	// evite de dire que le formulaire est mal rempli si on le laisse vide et qu'on change de champ
	{
		if (result = telRegex.test(champ.value))
			{		
			surligneErreur(champ, false);
			}
		else
			{
			alert(champ.value + " : ce telephone francais est incorrect");
			surligneErreur(champ, true);
			}	
		return result;
	}
	else // Si le champ n'est pas rempli on laisse la couleur de base
	{
		champ.style.backgroundColor = "";
	}
}

// Renvoi false si le champ n'est pas rempli
function champRempli(champ)
{
	var result;
	if (champ.value == "")
	{
		result = false;
	}
	else
	{
		result = true;
	}	
	return result;
}

/* Si les champs ne sont pas bien remplis, on surligne le champ */
function surligneErreur(champ, erreur)
{
   if(erreur)
      champ.style.backgroundColor = "#fba";	// couleur rouge
   else
      champ.style.backgroundColor = "#ff0"; // couleur jaune
}


Merci à tous ceux qui font avancer les choses et qui nous enseignent ce qu'il savent
L'envie d'apprendre, c'est la drogue des Zér0s.... mais aussi celle des pros.

Java : |||||||||| Java API : |||||||||| XHTML / CSS : |||||||||| JavaScript :|||||||||| JEE :|||||||||| DXHTML:|||||||||| Best Practice JS:|||||||||| AJAX:||||||||||

Énorme merci à M@theo21 et à cysboy qui m'ont énormément appris.
 
Hors ligne ben1503 # Posté le 15/06/2010 à 07:15:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
function verifPseudo(champ)
{
if(champ.value.length < 2 || champ.value.length > 25)
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
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;
}
}
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;
}
}
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;
}
}

</script>
</head>

<body>


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

question con il ce passe rien chez moi pourquoi
Hors ligne markox # Posté le 18/09/2010 à 18:25:42

En fait je cherche sur une fonction Javascript qui vérifie dans un champ texte que si on tape par exemple au moins 2 majuscules un message au dessous du champ s'affiche à l'utilisateur lui indiquant qui il doit préciser cette abréviation .

Merci :euh:
Hors ligne ProgVal # Posté le 14/01/2012 à 17:02:34
Catapoulpe !
Avatar
close

Ville : Jouy aux arches
Pays : France métropolitaine
Études : Lycée Fabert - Metz

 L'expression régulière est à améliorer. Exemples d'adresses valides qui sont refusées :
* example@example.42
* example@example.museum
* example+test@example.net
* example@example.example.net

Et la liste est longue.
Image utilisateur
 
Connecté tehemgi # Posté le 23/05/2012 à 12:47:58
Faut pas décoder ! ...
Avatar

Avis : Mitigé

Je suis d'accord avec ben1503, quand on fait "submit", rien n'est envoyé et la page est blanche...
Et çà ne vient pas de mon code php ! ...

Voir tous les commentaires