Discussion :

[PadaBen]

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 :

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

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

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&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" 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 !!

[Bisûnûrs]

C'est normal ton bouton est de type submit.

[PadaBen]

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

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

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

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

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

ou

Code :

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

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

Le onClick sur un bouton submit ne sers à rien dans ton cas.

[denisC]

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 :

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

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

[Seb19]

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 :

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

[denisC]

Code :

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

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

[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 !

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

Code :

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

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 :

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

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 :

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

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

[denisC]

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

[PadaBen]

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

[PadaBen]

dans la vérification de mon formulaire, je vérifie si un des boutons radio a bien été activé...

j'ai essayé ca :

Code :

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

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 :

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

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

MErci pour cette précision
Padaben

[Bisûnûrs]

Code :

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

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

[denisC]

Autre solution (pour un nombre arbitraire de radios), il faut calculer avant si un radio est activé:

Code :

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

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)

[PadaBen]

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