verification formulaire et envoi

Version imprimable

Bonsoir à tous.

je vous explique le contexte :
j'ai un formulaire en html comprenant 4 champs sur www.mondomaine.com
formulaire en méthode POST. envoi à un fichier sur http://sousdomaine.mondomaine.com

je vérifie à l'aide d'une fonction javascript la validité des champs et envoie les données à ma page de récéption.

voici mon code js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function verif() { if (document.formulaire.nom.value.length<1||document.formulaire.nom.value==' '){ document.getElementById("mess").value='Indiquez votre nom'; } else if (document.formulaire.prenom.value.length<1||document.formulaire.prenom.value==' '){ document.getElementById("mess").value='Indiquez votre prénom'; } else if (document.formulaire.email.value.indexOf('.')==-1||document.formulaire.email.value.indexOf('@')==-1){ document.getElementById("mess").value='Indiquez votre e-mail'; } else if (document.formulaire.choix.status==''){ document.getElementById("mess").value='Choissez votre statut'; } else if (!document.formulaire.condgen.checked){ document.getElementById("mess").value='Lisez les conditions générales'; } else { //document.getElementById("mess").value='ok'; document.getElementById("formulaire").submit(); } }
et mon formulaire html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <form name="formulaire" method="POST" action="http://sousdomaine.mondomaine.com/form.php" > <span class="jaune">Nom </span><input name="nom" type="text" maxlength="20" /> <span class="jaune">Prénom </span><input name="prenom" type="text" maxlength="20" /> <span class="rose">E-mail </span><input name="email" type="text" maxlength="30" /> <input name="choix" type="radio" value="1" /><span class="bleu">choix1</span> <input name="choix" type="radio" value="2" /><span class="bleu">choix2</span> <input name="choix" type="radio" value="3" /><span class="bleu">choix3</span> <input name="choix" type="radio" value="4" /><span class="bleu">choix4</span><br /> <input name="mess" type="text" size="30" /> <span class="blanc">J´accepte les conditions</span><input name="condgen" type="checkbox" /><br /> <input type="submit" name="envoidonnees" value="VALIDER" class="btonvalid" onclick="verif()" /><br /> </form>
Voilà , alors j'ai un pb qui me bloque depuis pas mal de temps.
la fonction est bien lancée, et vérifie les champs, mais des que le bouton valider est enfoncé, l'envoi en POST s'effectue vers form.php.
je suis donc ennuyé car je ne veux pas que les données soient envoyées ( action du formulaire) avant que le formulaire soit vérifié completement.
comment dire je vérifie, puis j'envoie. et non comme c'est le cas, je vérifie et j'envoie en mm temps....

je suis largué!!
j'ai bien trouvé des sources, mais rien ne fonctionne, je pense que je ne suis pas loin de la solution là, mais un oeil expert serai le bienvenu :)

Merci à tous pour votre aide, je galere

@+
Padaben

Edit ' désolé, je pas prkoi ds le code html, j'ai une ligne de formulaire qui c'est barée à l'est !!

19/09/2006, 23h05
Bisûnûrs

C'est normal ton bouton est de type submit.
19/09/2006, 23h25
PadaBen

re salut

est il préférable de l'avoir de type button ?

et pourkoi ? puisque je suis censé envoyer des données via POST?

merci de ton aide

Padaben
19/09/2006, 23h34
Bisûnûrs

Si tu as un bouton de type submit il envoi les données quoi que tu fasses. Ce n'est pas une alert qui va l'en empêcher.

Fais des recherches sur la fonction submit() en javascript.
20/09/2006, 00h50
Madge

Utilise un onSubmit sur ton formulaire, de cette manière, la fonction JS s'effectuera avant de le soumettre. Une autre solution consiste à remplacé ton input type='submit' par un type button et d'appeler ta fonction de vérification lorsqu'on clique dessus.

Deux choix donc :

Code:

<form name="formulaire" method="POST" action="http://sousdomaine.mondomaine.com/form.php" onSubmit='verif();'>

ou

Code:

<input type="button" name="envoidonnees" value="VALIDER" class="btonvalid" onclick="verif()" />

Le onClick sur un bouton submit ne sers à rien dans ton cas.
20/09/2006, 10h07
denisC

Citation:

Envoyé par Madge

Utilise un onSubmit sur ton formulaire, de cette manière, la fonction JS s'effectuera avant de le soumettre. Une autre solution consiste à remplacé ton input type='submit' par un type button et d'appeler ta fonction de vérification lorsqu'on clique dessus.

Seul le premier choix est une technique valable. Un input button, c'est mââââl.

Cf faq:
http://javascript.developpez.com/faq...s#ControleForm

Il faut bien mettre un return dans le onsubmit, pour stopper le submit si ta vérification retourne false:

Code:

<form name="formulaire" method="POST" action="http://sousdomaine.mondomaine.com/form.php" onSubmit='return verif();'>

Bonjour,

Si tu peux laisser le type du bouton en submit, mais à ce moment là, il faut virer le onClick, rajouter onSubmit dans la balise form et modifier ta fonction javascript afin qu'elle retourne true ou false.
Si elle renvoie false, le formulaire ne sera pas soumis.

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
function verif() {
		if (document.formulaire.nom.value.length<1||document.formulaire.nom.value==' '){
			document.getElementById("mess").value='Indiquez votre nom';
                        return false;
			}
		else if (document.formulaire.prenom.value.length<1||document.formulaire.prenom.value==' '){ 
			document.getElementById("mess").value='Indiquez votre prénom';
                        return false;
			}
		else if (document.formulaire.email.value.indexOf('.')==-1||document.formulaire.email.value.indexOf('@')==-1){
			document.getElementById("mess").value='Indiquez votre e-mail';
                        return false; 
			}
		else if (document.formulaire.choix.status==''){
			document.getElementById("mess").value='Choissez votre statut';
                        return false;
			}
		else if (!document.formulaire.condgen.checked){
			document.getElementById("mess").value='Lisez les conditions générales';
                        return false;
			}
		else {
			//document.getElementById("mess").value='ok';
			//document.getElementById("formulaire").submit();
                        return false;
		}
	}



<form name="formulaire" method="POST" action="http://sousdomaine.mondomaine.com/form.php"  onSubmit="return verif()">
					<span class="jaune">Nom </span><input name="nom" type="text" maxlength="20"  />
					<span class="jaune">Pr&eacute;nom </span><input name="prenom" type="text"  maxlength="20"  />								<span class="rose">E-mail </span><input name="email" type="text" maxlength="30"  />
					<input name="choix" type="radio" value="1" /><span class="bleu">choix1</span>
					<input name="choix" type="radio" value="2" /><span class="bleu">choix2</span>
					<input name="choix" type="radio" value="3" /><span class="bleu">choix3</span>
					<input name="choix" type="radio" value="4" /><span class="bleu">choix4</span><br />
					<input name="mess" type="text" size="30" />
					<span class="blanc">J&acute;accepte les conditions</span><input name="condgen" type="checkbox" /><br />
					<input type="submit" name="envoidonnees" value="VALIDER" class="btonvalid"/><br />
			  	</form>

Code:

1
2
3
4
5
6
		else {
			//document.getElementById("mess").value='ok';
			//document.getElementById("formulaire").submit();
                        return true;
		}

Dans le dernier else, pense à retourner true :)

Salut !!

merci pour cette info, j'ai bien lu des infos sur submit et button, je vois maintenant la #.

cependant mon script fonctionne bien sous ie, mais pas sous FF, le formulaire est bien validé, mais apres l'envoi ne s'effectue pas !

je vous met les lignes essentielles du code, et non le tout:
Code:

1 2 3 4 5 6 7 8 9 10 11 function verif(formulaire) { if (document.formulaire.nom.value.length<1||document.formulaire.nom.value==' '){ document.getElementById("mess").value='Indiquez votre nom'; return false; }else { return true; document.getElementById("mess").value=' '; document.forms['formulaire'].submit() } }
et le formulaire
Code:

1 2 3 4 5 6 <form name="formulaire" method="POST" action="sousdomaine.mondomaine.com/form.php" > <input patatipatata> ................ <input type="button" name="doc" value="VALIDER" class="btonvalid" onclick="return verif(this.form)" /> </form>
ou pour la derniere ligne, j'ai aussi essayé
Code:

1 2 <input type="button" name="doc" value="VALIDER" class="btonvalid" onclick="verif(formulaire)" />
mais rien y fait, c ok sous ie, mais FF me bloque l'envoi,

Merci pour vos conseils avertis !

@+
Padaben

20/09/2006, 10h56
denisC

Citation:

Envoyé par PadaBen

merci pour cette info, j'ai bien lu des infos sur submit et button, je vois maintenant la #.

cependant mon script fonctionne bien sous ie, mais pas sous FF, le formulaire est bien validé, mais apres l'envoi ne s'effectue pas !

Utilise un bouton submit normal et l'évement onsubmit de ton formulaire.....

Avec ta technique, quelqu'un qui n'a pas le javascript ne pourra pas valider ton formulaire. Et je ne te parle pas de l'accessiblité dans les navigateurs spéciaux....
20/09/2006, 11h01
PadaBen

MERCI DenisC pour tant de réactivité

Merci vraiment de votre aide, cela fonctionne maintenant, effectivement il faut bien utiliser le type de bouton submit et ne pas oublier de mettre onSubmit='return verif()'

sans le return c mort...

Enfin, merci encore de votre aide, et je persiste à dire que ce forum developpez est particulièrement professionnel, j'en suis très content

MErci continuez

@+

Padaben
20/09/2006, 11h07
PadaBen

une dernière petite question
dans la vérification de mon formulaire, je vérifie si un des boutons radio a bien été activé...

j'ai essayé ca :
Code:

1 2 3 else if (document.formulaire.choix.status==''){ document.getElementById("mess").value='Choissez votre statut';
j'ai trouvé sur le net plein de méthodes différentes pour détecter l'activation d'une radio, mais aucune ne fonctionne, celle ci non plus,

est il préférable de mettre
Code:

1 2 3 if ( else if (!document.formulaire.choix.checked){ document.getElementById("mess").value='Choissez votre statut';
MErci pour cette précision
Padaben

Code:

1
2
3
else if((!document.formulaire.choix[0].checked)&&(!document.formulaire.choix[1].checked)[...]){
	document.getElementById("mess").value='Choissez votre statut';
}

20/09/2006, 11h52
denisC
Autre solution (pour un nombre arbitraire de radios), il faut calculer avant si un radio est activé:
Code:

1 2 3 4 5 6 var unCoche = false; for (i=0;i<document.formulaire.choix.length;i++) { unCoche = unCoche || document.formulaire.choix[i].checked; }
Après, tu n'as plus qu'à faire le test sur unCoche... (mais c'est la même solution que BisounoursJos)
20/09/2006, 12h21
PadaBen

RE Sallut !

j'ai effectué la condition de BisounoursJos, et ca fonctionne,
Merci Denis C, pour ta précision.

Encore Grand merci à tous...

bonne journée, je clos le post.

@+ Padaben