Script de vérification de formulaire

**cashmoney** · 14/05/2009, 14h47

Bonjour, débutant en javascript, je voudrais tester chaque champs de mon formulaire, les consigner dans un tableau et si la longueur de mon tableau a changé, alors aucun Envoie sinon Envoie du formulaire. Le script que je vous soumet ne réagis pas à mon click.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function test()
 
{ 
/*tableau récuperation erreur*/ 
erreur=new Array();
 
	/*nom*/ 
	nom=document.forms["fContact"].fnom.value; 
	if(nom=="")
	{ 
	verif_nom="le Nom"; 
	erreur.push(verif_nom);
	} 
		/*prenom*/ 
		prenom=document.forms["fContact"].fprenom.value; 
		if(prenom=="")
		{ 
		verif_nom="le Prénom"; 
		erreur.push(verif_prenom);
		} 
				/*email*/ 
				var mail = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" ) ;
				adresse = document.forms["fContact"].fmail.value; 
				if (adresse.search(mail)== -1) 
				{ 
				verif_email="email invalide"; 
				erreur.push(verif_email);
				} 
 
			/*téléphone*/ 
			tel=document.forms["fContact"].fphone.value; 
			if (tel!=""){ if(isNaN(tel))
			{ 
			verif_tel_fixe="n° de téléphone érroné"; 
			alert(verif_tel_fixe);
			erreur.push(verif_tel_fixe); 
			} 
			else
			{ 
			vide="téléphone"; 
			erreur.push(vide);
			} 
 
	/*commentaires*/ 
	com=document.forms["fContact"].fcoms.value; 
	if((com=="")||(com=="Commentaires")){ 
	verif_com="Commentaires"; 
	erreur.push(verif_com); 
	} 
 
			//récuperation des erreurs dans le tableau et alert pour l'utilisateur 
			if (erreur.length>0)
			{
			alert(erreur.join("\n"));
			}
			else
			{
			document.forms["fContact"].submit();
			}
 
}

je joins le body afin que vous puissiez tester.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<body>
<p align=center class="titre">ASSURANCE AUTO</p>
<div class="news" align=center>
<table width="900" height="80%" border="0" cellspacing="0" cellpadding="0" align="center"> 
<tr> 
<td><table width="575" height="550" border="0" cellspacing="0" cellpadding="0" align="center"> 
<tr> 
<td align=center> <img src="/images/Logo_Phenix.jpg" height="120" width="150"></img>
<!--Début de formulaire--> 
<form name="fContact" method="post" enctype="text/plain" action="mailto:xxxxxxxxx@yahoo.fr">
<table width="540" border="0" cellspacing="0" cellpadding="0" align="center" class="medium">
<tr> 
<td>Nom : </td> 
<td> <input type="text" name="fnom" size="20" maxlength="19"></td> 
</tr> 
<tr> 
<td> Prénom : </td> 
<td><input type="text" name="fprenom" size="20" maxlength="19"></td> 
</tr> 
<tr> 
<td>Téléphone : </td> 
<td><input name="fphone" type="text" size="10" maxlength="10"></td> 
</tr>
<tr> 
<td> Email : </td> 
<td><input type ="text" maxlength="30" size = "35"name="fmail"></td> 
</tr> 
<tr> 
<td>Commentaires : </td> 
<td><textarea name="fcom" cols="35" rows="5"></textarea>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Envoyer" onClick="test()"/>&nbsp;&nbsp;<input type="reset" value="Annuler"/> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<BR> 
<p>
<p>
<p>
<p>
<p>
<p align=center><A HREF="assureAuto.html">Retour à l'index</A></p>
</div>
</body>

PS: si vous avez des expressions régulières pour la vérification de nom et prénom, je suis prenneur.
Meric pour votre aide

**devyan** · 14/05/2009, 15h13

Salut,

Pour cela, il me semble qu'il suffit de mettre l'appel de ta fonction sur onsubmit du formulaire. (ton bouton devient alors un input de type "submit")
Par contre ta fonction doit renvoyer true ou false pour autoriser ou non l'envoi des données...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function test()
 
{ 
...

			//récuperation des erreurs dans le tableau et alert pour l'utilisateur 
			if (erreur.length>0)
			{
			alert(erreur.join("\n"));
			return false;
			}
			else
			{
			//document.forms["fContact"].submit();
			return true;
			}
 

}

**cashmoney** · 14/05/2009, 15h16

Merci, je viens de m'en rendre compte. A force de trop avoir le nez dans les codes, on ne voit plus rien. Mais je teste et je vous le dis tout à l'heure.

Le soucis, c'est que ma boîte de dialogue erreur ne s'affiche pas avec mes erreurs listées

**SPACHFR** · 14/05/2009, 15h19

Salut,

1) Il manque une accolade de fermeture à la fonction test()

2) Ensuite ta fonction va se dérouler, mais renvoie une erreur à la ligne ci-dessous.
(valeur null ou n'est pas un objet)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
com=document.forms["fContact"].fcoms.value;

a corriger par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
com=document.forms["fContact"].fcom.value;

@+

**cashmoney** · 14/05/2009, 15h24

j'ai revu mon code mais rien à faire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function test()
 
{ 
/*tableau récuperation erreur*/ 
erreur=new Array();
 
...
//récuperation des erreurs dans le tableau et alert pour l'utilisateur 
			if (erreur.length>0)
			{
			alert(erreur.join("\n"));
			document.write(erreur.join("\n"));
			return false;
			}
return true;			
 
}

Toujours aucune boîte de dialogue mention le contenu de mon tableau

alert(erreur.join("\n"));

**SPACHFR** · 14/05/2009, 15h30

J'ai testé ton code avec les corrections que je t'ai dit, cela fonctionne (IE7 et FF)....

Sauf ton test sur téléphone qui est à revoir car même si la zone est remplie ton tableau d'erreur affiche téléphone

**devyan** · 14/05/2009, 15h35

Réindente ton code, tu devrais trouver plus facilement l'accolade qui manque (probablement après le if/else imbriqué)

**SPACHFR** · 14/05/2009, 15h37

Envoyé par SPACHFR

Salut,

1) Il manque l' accolade de fermeture à la fonction test()

2) Ensuite ta fonction va se dérouler, mais renvoie une erreur à la ligne ci-dessous.
(valeur null ou n'est pas un objet)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
com=document.forms["fContact"].fcoms.value;

a corriger par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
com=document.forms["fContact"].fcom.value;

@+

**cashmoney** · 14/05/2009, 15h38

Merci c'est gentil, j'utilise IE8 et j'avoue que j'ai du mal.
J'installe firefox pour tester tout ça.

**cashmoney** · 14/05/2009, 15h43

Trop bizarre, alors que tout a été corrigé dans notepad++ mais toujours rien ne marche. FF 3.1, mais aucune boite de dialogue, rien. Pas de message

**devyan** · 14/05/2009, 15h47

Envoyé par cashmoney

Trop bizarre, alors que tout a été corrigé dans notepad++ mais toujours rien ne marche. FF 3.1, mais aucune boite de dialogue, rien. Pas de message

Et bien poste le nouveau code afin que l'on y jette un oeil

**cashmoney** · 14/05/2009, 15h53

ok, je resoumet ma function avec les correction et le body du code html;
Script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function test()
 
{ 
/*tableau récuperation erreur*/ 
erreur=new Array();
 
	/*nom*/ 
	nom=document.forms["fContact"].fnom.value; 
	if(nom=="")
	{ 
	verif_nom="le Nom"; 
	erreur.push(verif_nom);
	return false;
	} 
		/*prenom*/ 
		prenom=document.forms["fContact"].fprenom.value; 
		if(prenom=="")
		{ 
		verif_nom="le Prénom"; 
		erreur.push(verif_prenom);
		return false;
		} 
				/*email*/ 
				var maReg = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" ) ;
				adresse = document.forms["fContact"].fmail.value; 
				if (adresse.search(maReg)== -1) 
				{ 
				verif_email="email invalide"; 
				erreur.push(verif_email);
				return false;
				} 
 
			/*téléphone*/ 
			tel=document.forms["fContact"].fphone.value; 
			if (tel!="") 
			{ 
			if(isNaN(tel))
			{ 
			verif_tel_fixe="n° de téléphone érroné"; 
			alert(verif_tel_fixe);
			erreur.push(verif_tel_fixe);
			return false; 
			} 
			}
			else
			{ 
			vide="téléphone"; 
			erreur.push(vide);
			return false;
			} 
 
	/*commentaires*/ 
	com=document.forms["fContact"].fcom.value; 
	if((com=="")||(com=="Commentaires"))
	{ 
	verif_com="Commentaires"; 
	erreur.push(verif_com); 
	return false;
	} 
 
			//récuperation des erreurs dans le tableau et alert pour l'utilisateur 
			if (erreur.length>0)
			{
			alert(erreur.join("\n"));
			document.write(erreur.join("\n"));
			return false;
			}
return true;			
 
}

Body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<body>
<p align=center class="titre">ASSURANCE AUTO</p>
<div class="news" align=center>
<table width="900" height="80%" border="0" cellspacing="0" cellpadding="0" align="center"> 
<tr> 
<td><table width="575" height="550" border="0" cellspacing="0" cellpadding="0" align="center"> 
<tr> 
<td align=center> <img src="/images/Logo_Phenix.jpg" height="120" width="150"></img>
<!--Début de formulaire--> 
<form name="fContact" method="post" enctype="text/plain" action="" onsubmit="return test()">
<table width="540" border="0" cellspacing="0" cellpadding="0" align="center" class="medium">
<tr> 
<td>Nom : </td> 
<td> <input type="text" name="fnom" size="20" maxlength="19"></td> 
</tr> 
<tr> 
<td> Prénom : </td> 
<td><input type="text" name="fprenom" size="20" maxlength="19"></td> 
</tr> 
<tr> 
<td>Téléphone : </td> 
<td><input name="fphone" type="text" size="10" maxlength="10"></td> 
</tr>
<tr> 
<td> Email : </td> 
<td><input type ="text" maxlength="30" size = "35"name="fmail"></td> 
</tr> 
<tr> 
<td>Commentaires : </td> 
<td><textarea name="fcom" cols="35" rows="5" onfocus="this.value='';">Commentaires...</textarea>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Envoyer"/>&nbsp;&nbsp;<input type="reset" value="Annuler"/> </td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<BR> 
<p>
<p>
<p>
<p>
<p>
<p align=center><A HREF="assureAuto.html">Retour à l'index</A></p>
</div>
</body>

form

<form name="fContact" method="post" enctype="text/plain" action="" onsubmit="return test()">

**devyan** · 14/05/2009, 15h57

Ok, je vois

Il ne faut mettre le "return false ;" qu'à la fin (après "alert") sinon tout ce qui se trouve après n'est pas exécuté

**cashmoney** · 14/05/2009, 16h08

Certainement, je viens de recorriger, mais toujours rien

. J'avoue que tout celà m'inquiète.

Quand j'exécute avec opéra 9, il m'affiche cette rreur dans mon script.

message: Statement on line 32: Undefined variable: verif_prenom
Line 32 of inline#1 script in file://localhost/C:/Documents%20and%20Settings/Utilisateur/Mes%20documents/pages%20web/contact.html: In function test
erreur.push(verif_prenom);

Variable indéfinie

**devyan** · 14/05/2009, 16h14

Désolé mais il a raison

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
		prenom=document.forms["fContact"].fprenom.value; 
		if(prenom=="")
		{ 
		verif_nom="le Prénom"; 
		erreur.push(verif_prenom);
		return false;
		}

Ah, les joies du CTRL+C/CTRL+V

**cashmoney** · 14/05/2009, 16h20

Mdr, c'est vrai que j'ai écris un bout de code, testé et dupliqué. ça peut arriver à n'importe qui

Bon, je remouline tout

**cashmoney** · 14/05/2009, 16h24

Great it works

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function test()
 
{ 
/*tableau récuperation erreur*/ 
erreur=new Array();
 
	/*nom*/ 
	nom=document.forms["fContact"].fnom.value; 
	if(nom=="")
	{ 
	verif_nom="le Nom"; 
	erreur.push(verif_nom);
	} 
		/*prenom*/ 
		prenom=document.forms["fContact"].fprenom.value; 
		if(prenom=="")
		{ 
		verif_prenom="le Prénom"; 
		erreur.push(verif_prenom);
		} 
				/*email*/ 
				var mail = new RegExp ( "^\\w[\\w+\.\-]*@[\\w\-]+\.\\w[\\w+\.\-]*\\w$", "gi" ) ;
				adresse = document.forms["fContact"].fmail.value; 
				if (adresse.search(mail)== -1) 
				{ 
				verif_email="email invalide"; 
				erreur.push(verif_email);
				} 
 
			/*téléphone*/ 
			tel=document.forms["fContact"].fphone.value; 
			if (tel!="") 
			{ 
			if(isNaN(tel))
			{ 
			verif_tel="n° de téléphone érroné"; 
			erreur.push(verif_tel);
			} 
			}
			else
			{ 
			vide="téléphone"; 
			erreur.push(vide);
			} 
 
	/*commentaires*/ 
	com=document.forms["fContact"].fcom.value; 
	if((com=="")||(com=="Commentaires"))
	{ 
	verif_com="Commentaires"; 
	erreur.push(verif_com); 
	} 
 
			//récuperation des erreurs dans le tableau et alert pour l'utilisateur 
			if (erreur.length>0)
			{
			alert(erreur.join("\n"));
			return false;
			}
return true;			
 
}

Merci pour tout et surtout de ta patience

devyan

Script de vérification de formulaire

JavaScript

Discussions similaires

Partager

Partager