Script de vérification de formulaire

Version imprimable

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:

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:

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

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:

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; } }

14/05/2009, 15h16
cashmoney

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
14/05/2009, 15h19
SPACHFR
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:

1 2 com=document.forms["fContact"].fcoms.value;
a corriger par
Code:

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

j'ai revu mon code mais rien à faire.

Code:

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

Citation:

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

:cry:

14/05/2009, 15h30
SPACHFR

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
14/05/2009, 15h35
devyan

Réindente ton code, tu devrais trouver plus facilement l'accolade qui manque (probablement après le if/else imbriqué)
14/05/2009, 15h37
SPACHFR
Citation:
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:

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

a corriger par

Code:

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

@+
14/05/2009, 15h38
cashmoney

Merci c'est gentil, j'utilise IE8 et j'avoue que j'ai du mal.
J'installe firefox pour tester tout ça.
14/05/2009, 15h43
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 message8O
14/05/2009, 15h47
devyan

Citation:

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 message8O

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

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

Code:

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:

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

Citation:

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

:roll:

14/05/2009, 15h57
devyan

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é :D
14/05/2009, 16h08
cashmoney

Certainement, je viens de recorriger, mais toujours rien8O. J'avoue que tout celà m'inquiète.

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

Citation:

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éfinie8O

Désolé mais il a raison :D
Code:

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 :mouarf:

14/05/2009, 16h20
cashmoney

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

Great it works

Code:

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

Citation:

devyan

:king: