Formulaire vérification JS

Version imprimable

Bonjour,

Je cherche a vérifier, récupérer des champs via un formulaire de parrainage.
Un javascript a été mis en place mais j'ai un soucis lors de la validation, il m'affiche bien un message d'erreur mais la page s'actualise.
Les informations rentrées initialement sont donc perdues.
Je n'arrive pas à trouver, pourriez vous m'aider svp ?

Le script est rappelé sur le bonton plus bas

Code:

<input style="WIDTH: 150px" onclick=email1() value=Envoyer type=submit>

Merci d'avance pour votre aide

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
<script type=text/javascript>
function email1() {
                var mail1 = document.getElementById("QWXCH6_13268").value;
 
                var InputMail1 = document.getElementById("QWXCH6_13268"); 
				var nom = document.getElementById("QWXCH6_13271").value;
 
                var Inputnom = document.getElementById("QWXCH6_13271");
 
                var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
				var nombre = document.getElementById("QWXCH6_13267").value;
				var imputnombre = document.getElementById("QWXCH6_13267");
				var chiffres = new String(nombre);
				chiffres = chiffres.replace(/[^0-9]/g, '');
				compteur = chiffres.length;
 
				if (mail1 !== null && mail1 !== ''){
                    document.getElementById("QWXCH6_13340").value = mail1;
                }
				 if (mail1 === "")
                { 	
                    InputMail1.style.backgroundColor = "#fba";
                    alert("Veuillez entrer une adresse email!");  
                    return false;   
                }
 
				else  if (regEmail.test(mail1) !== true)
				{ 					
					InputMail1.style.backgroundColor = "#fba";
					alert("Veuillez entrer une adresse email correcte!");   
					return false;   
				}
 
				if ( nombre == "" )
				{
				alert ( "Le champ téléphone est vide !" );
				imputnombre.style.backgroundColor = "#fba";
				return false;
				}
				else if (compteur!=10)
				{
				alert("Assurez-vous de rentrer un numéro à 10 chiffres (xxx-xxx-xxxx)");
				imputnombre.style.backgroundColor = "#fba";
				return false;
				}
 
 
 
				if (nom === "")
				{ 	
					Inputnom.style.backgroundColor = "#fba";
					alert("Veuillez entrer un nom!");  
					return false;   
				}
				else if(nom.length < 2 || nom.length > 25)
				{
					Inputnom.style.backgroundColor = "#fba";
					alert("Veuillez entrer un nom correct!"); 
					return false;
				} 
				else 
				{
					document.forms["theForm"].submit();
				}
			}
 
</script>
</head>
<body>
<form id=theForm method=post action=/V5/save.aspx><!--param-->

30/06/2014, 11h49
SpaceFrog

pense aux quotes dans ton html ...

Code:

[attr]=" [contenu]"

sinon un peu de lecture sur la validation de form ...
(ne pas oublier le return dans le onsubmit)
http://www.developpez.net/forums/d55...on-formulaire/

Je travaille avec un outil d'emailing qui supprime les quotes automatiques dsl lol
Merci bcp pour ta réponse.
C'est le return qui manquait et qui fait que ca marche !!!

J'ai une 2 eme demande si possible.
j'aimerais faire en sorte de que si la case n'est pas coché, le formulaire ne s'envoie pas

Merci encore :)

voici le code :

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
<script type=text/javascript>
function email1() {
                var mail1 = document.getElementById("QWXCH6_13268").value;
 
                var InputMail1 = document.getElementById("QWXCH6_13268"); 
				var nom = document.getElementById("QWXCH6_13271").value;
 
                var Inputnom = document.getElementById("QWXCH6_13271");
 
                var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
				var telRegex = new RegExp (/^(0[1-68])(?:[ _.-]?(\d{2})){4}$/); // Numero francais ( portable compris)
 
				var nombre = document.getElementById("QWXCH6_13267").value;
				var imputnombre = document.getElementById("QWXCH6_13267");
				var chiffres = new String(nombre);
				chiffres = chiffres.replace(/[^0-9]/g, '');
				compteur = chiffres.length;
 
				if (document.getElementById("f13741").checked = false ) {
					alert ('Veuillez cocher la case pour vous valider le formulaire');
				return false;
				}
 
				if (mail1 !== null && mail1 !== ''){
                    document.getElementById("QWXCH6_13340").value = mail1;
                }
				 if (mail1 === "")
                { 	
                    InputMail1.style.backgroundColor = "#fba";
                    alert("Veuillez entrer une adresse email!");  
                    return false;   
                }
 
				else  if (regEmail.test(mail1) !== true)
				{ 					
					InputMail1.style.backgroundColor = "#fba";
					alert("Veuillez entrer une adresse email correcte!");   
					return false;   
				}
 
				if ( nombre == "" )
				{
				alert ( "Le champ téléphone est vide !" );
				imputnombre.style.backgroundColor = "#fba";
				return false;
				}
				else if (telRegex.test(nombre) !== true ){
			alert("Assurez-vous de rentrer un numéro à 10 chiffres  au format français");
			imputnombre.style.backgroundColor = "#fba";
			return false;
		       }   
 
				if (nom === "")
				{ 	
					Inputnom.style.backgroundColor = "#fba";
					alert("Veuillez entrer un nom!");  
					return false;   
				}
				else if(nom.length < 2 || nom.length > 25)
				{
					Inputnom.style.backgroundColor = "#fba";
					alert("Veuillez entrer un nom correct!"); 
					return false;
				} 
				else 
				{
					document.forms["theForm"].submit();
				}
			}
 
</script>

Code:

1
2
3
4
5
if ( document.getElementById("f13741").checked == false )
     {
     alert ('Veuillez cocher la case pour vous valider le formulaire') ;
     return false ;
     }

Dernière demande (j'espere :P)
Lorsque je retourne faux sur un critère, la case se colore en une couleur.
j'aimerais savoir comment faire pour que la case ne reste pas coloré une fois le champs complété correctement ?

Merci d'avance

Voici le code

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
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
<script type=text/javascript>
function email1() {
                var mail1 = document.getElementById("WJAP6C_13268").value;
                var InputMail1 = document.getElementById("WJAP6C_13268"); 
				var Inputcase = document.getElementById("f13741"); 
				var nom = document.getElementById("WJAP6C_13271").value;              
                var Inputnom = document.getElementById("WJAP6C_13271");
 
                var prenom = document.getElementById("WJAP6C_13272").value; 			
                var Inputprenom = document.getElementById("WJAP6C_13272");
 
				var date = document.getElementById("WJAP6C_13279").value;
				var Inputdate = document.getElementById("WJAP6C_13279");
 
                var regEmail = new RegExp('^[0-9a-z._-]+@{1}[0-9a-z.-]{2,}[.]{1}[a-z]{2,5}$','i');
				var telRegex = new RegExp (/^(0[1-689])(?:[ _.-]?(\d{2})){4}$/); // Numéro francais ( portable compris)
				var regdate = new RegExp("^(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[012])/[0-9]{4}$");
 
				var nombre = document.getElementById("WJAP6C_13267").value;
				var inputnombre = document.getElementById("WJAP6C_13267");
				var chiffres = new String(nombre);
				chiffres = chiffres.replace(/[^0-9]/g, '');
				compteur = chiffres.length;
 
				if (mail1 !== null && mail1 !== ''){
                    document.getElementById("WJAP6C_13340").value = mail1;
                }
 
 
				if (nom == "")
				{ 	
					Inputnom.style.backgroundColor = "#F85";
					alert("Veuillez entrer un nom!");  
					return false;   
				}
				else if(nom.length < 2 || nom.length > 50)
				{
					Inputnom.style.backgroundColor = "#F85";
					alert("Veuillez entrer un nom correct"); 
					return false;
				} 
 
				if (prenom == "")
				{ 	
					Inputprenom.style.backgroundColor = "#F85";
					alert("Veuillez entrer un prénom");  
					return false;   
				}
				else if (prenom.length < 2 || prenom.length > 50)
				{
					Inputprenom.style.backgroundColor = "#F85";
					alert("Veuillez entrer un prénom correct"); 
					return false;
				} 
 
				if (date ===  '')
				{ 						
					alert("Veuillez entrer une date"); 
					Inputdate.style.backgroundColor = "#F85";					
					return false;   
				}
				else if (regdate.test(date) !== true )
				{
				alert("Veuillez entrer une date de naissance correcte");
				Inputdate.style.backgroundColor = "#F85";
				return false;
		        }   
 
				if ( nombre == "" )
				{
				alert ( "Le champ téléphone est vide !" );
				inputnombre.style.backgroundColor = "#F85";
				return false;
				}
 
				else if (telRegex.test(nombre) !== true )
				{
				alert("Veuillez entrer un numéro de téléphone correct");
				inputnombre.style.backgroundColor = "#F85";
				return false;
		       }   
 
				if (mail1 == "")
                { 	
                    InputMail1.style.backgroundColor = "#F85";
                    alert("Veuillez entrer une adresse email");  
                    return false;   
                }
 
				else  if (regEmail.test(mail1) !== true)
				{ 					
					InputMail1.style.backgroundColor = "#F85";
					alert("Veuillez entrer une adresse email correcte");   
					return false;   
				}
 
 
				if (document.getElementById("f13741").checked == false)
				{
					Inputcase.style.backgroundColor = "#F85";
					alert ("Veuillez prendre connaissance du réglement de l'opération");
 
				return false;
				}
 
				else 
				{
					document.forms["theForm"].submit();
				}
			}
 
</script>

02/07/2014, 13h19
iakou
Tel que c'est construit. Je pense que ce n'est pas envisageable !

- La procédure de contrôle, examine les zones de saisies en séquence. Dès qu'une erreur de syntaxe est détectée, la zone concernée est "grisée" et une boîte de dialogue est affichée.
- Quand l'utilisateur corrige l'erreur puis "soumet à nouveau", la procédure de contrôle réexamine toutes les zones en séquence (elle va donc valider la zone qui vient d'être corrigée) et s'arrêtera à l'erreur suivante si il y en a une...
- Effectivement la 1ère zone bien que corrigée, va rester grisée !...

Le plus simple serait de ne pas griser la zone quand il y a une erreur, puisque de toute manière il y a la boite de dialogue qui intervient. Mais pour cela il faut éliminer bcp de lignes : Celles concernant les variable commençant par "input", ainsi que les instructions de colorisation correspondantes.

EXEMPLE :
Code:

1 2 var InputMail1 = document.getElementById("WJAP6C_13268"); InputMail1.style.backgroundColor = "#F85";
02/07/2014, 15h55
avyperez

Merci Iakou.

Bon je vais quand même le laisser je pense même si une fois le critère respecté, la case reste coché.

Merci beaucoup pour ton aide.

Bonne journée