vérification des champs d'un formulaire avant envoi

Version imprimable

bonjour,

dans le script ci-dessous, quand je n'active pas la verification des champs, il ouvre bien le client de messagerie pour envoyer les mails avec les infos correspondantes.

mais des que j'active, on dirait qu'il me fait un reset du formulaire

vous voyez d'ou ca viens ?

merci

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
<script language="javascript">
	function verifSaisie (){
		var msgErreur = "";
		var frm = "Vous devez remplir le champ ";
		if (document.envoi.radio.value.length < 1) {
			msgErreur += frm +"selectionner une civilite.\n"; 
		}
		if (document.envoi.nom.value.length < 1 ) {
		msgErreur += frm + "NOM.\n";
		}
		if (document.envoi.prenom.value.length < 1) {
			msgErreur += frm +"PRENOM.\n"; 
		}
		if (document.envoi.mail.value.length < 1) {
			msgErreur += frm + "E-MAIL.\n"; 
		}
		if (document.envoi.log.value.length < 1) {
			msgErreur += frm + "LOGIN.\n"; 
		}
		if (document.envoi.pass.value.length < 1) {
			msgErreur += frm + "MOT DE PASSE.\n"; 
		}
		if (document.envoi.message.value.length < 1) {
			msgErreur += frm + "Message.\n"; 
		}
		return msgErreur;
	}
 
	function envoie(){
		erreur = verifSaisie();
		if (erreur != null && erreur != "") {
			// affichage du message d'erreur
			alert(erreur);
		} else {
			// envoi du mail
			var env="mailto:";
			env +="test@";
			env +="test.fr";
			env +="?subject=[test]demande de login&body=";
			env += document.envoi.radio.value;
			env += "nom :";
			env += document.envoi.nom.value;
			env += "<br>prenom :";
			env += document.envoi.prenom.value;
			env += "<br>mail :";
			env += document.envoi.mail.value;
			env += "<br>login :";
			env += document.envoi.log.value;
			env += "<br>pass :";
			env += document.envoi.pass.value;
			env += "<br>message :";
			env += document.envoi.message.value;
			document.envoi.action=env;
		}
	}
 
</script>	
 
 
<form name="envoi" method="POST" enctype="text/plain" onSubmit="envoie();">
 
<p><b>Mr<input type="radio" name="radio" value="mr" />&nbsp;Mme <input type="radio" name="radio" value="mme" />&nbsp;Mlle<input type="radio" name="radio" value="mlle" />&nbsp;</b></p>
<table border="0">
	<tr>
		<td><b>Nom</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" name="nom"size=30 maxlength=30/></td>
	</tr>
	<tr>
		<td><b>Prénom</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" name="prenom"size=20 maxlength=20/></td>
	</tr>
	<tr>
		<td><b>E-mail</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" name="mail"size=40 maxlength=40/></td>
	</tr>
	<tr>
		<td><b>Login souhaité</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" name="log"size=15 maxlength=15/></td>
	</tr>
	<tr>
		<td><b>Mot de passe</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" name="pass"size=15 maxlength=15/></td>
	</tr>
</table>
<br>
<p>Décriver la ou les raisons pour lesquelles vous souhaité avoir un identifiant ansi quel type d'examen/projet vous souhaitez avoir accès</p>
<br>
<textarea name="message" cols="60" rows="5"></textarea>
<br>
<input type="submit" value="Envoyer" name="Envoyer">
<input type="reset" name="Submit" value="Effacer">
</form>

20/04/2007, 10h44
E.Bzz

Bonjour,

Code:

onSubmit="return envoie();"

envoie(); doit terminer par un return true (si ok) ou false (si ko).

... Bizarre d'appeler "submit" un bouton reset :mrgreen:

... et les <br> dans l'url, pas sûr que le résultat soit top :mrgreen:

Ceci dit, tu aurais le même résultat (en plus standard) en mettant une action mailto dans le form, en le laissant envoyer les champs de manière classique, et en ne faisant effectivement que la verif sur le onsubmit.
Là, tu as compliqué pour rien ;)

A+
20/04/2007, 10h54
fey

au depart je l'avais plus simple lol

je vais voir si je peux faire plus simple, sinon ca marche pas le return ^^

ah moins que j'ai zape quelque chose :p
20/04/2007, 11h17
E.Bzz

Citation:

Envoyé par E.Bzz

envoie(); doit terminer par un return true (si ok) ou false (si ko).

Si ça marche toujours pas, c'est qu'il y a aussi un autre pb ;)
20/04/2007, 12h37
fey

euh en fait j'ai un probleme de syntaxe :p

Code:

env += document.envoi.radio.value;

il me retourne un undefined ^^, et quand j'enleve cette ligne ca marche

y a t'il un moyen de recuperer la valeur ? parce que pour le select je sais faire mais pas pour le radio

merci
20/04/2007, 13h47
E.Bzz

Pb de compatibilité

Code:

env += document.forms['envoi'].elements['radio'].value;

A+
20/04/2007, 15h44
fey

ok merci je testerai cela ;)

bon en fait apparement ca marche pas du tout comme ca pour recuperer la valeur d'un radio

alors j'ai fais comme ca ;)
Code:

1 2 3 4 5 6 7 8 9 10 <input type="submit" value="Envoyer" name="Envoyer" onclick="enregistreChoix(this.form.radio);"> function enregistreChoix(bradio){ for (var i=0; i<bradio.length;i++){ if (bradio[i].checked){ rezradio=bradio[i].value; } } }
bon maintenant mon seul probleme est de faire un script pour recuperer les infos qui sont bonne car quand j'ai une erreur cela remet a zero mon formulaire :p

23/04/2007, 14h16
E.Bzz

EDIT : Oups : j'ai bégayé :mrgreen:
23/04/2007, 14h17
E.Bzz

Citation:

Envoyé par fey

bon en fait apparement ca marche pas du tout comme ca pour recuperer la valeur d'un radio

Et si !
Il faut que leur name soit commun, et le jeu de radio ne renverra qu'une seule valeur ... sinon, c'est des checkbox !
La syntaxe est bonne.
23/04/2007, 14h22
fey

Citation:

Envoyé par E.Bzz

Et si !
Il faut que leur name soit commun, et le jeu de radio ne renverra qu'une seule valeur ... sinon, c'est des checkbox !
La syntaxe est bonne.

ils ont tous le meme nom ;) c'est juste la valeur qui changais :p
23/04/2007, 14h28
E.Bzz

Citation:

Envoyé par fey

ils ont tous le meme nom ;) c'est juste la valeur qui changais :p

Heureusement !
Sinon, ça n'a aucun intérêt ;)
23/04/2007, 15h12
fey

bah ouais ^^
bon maintenant il faut que je me penche sur mon autre probleme :(
23/04/2007, 15h24
E.Bzz

Code:

onsubmit="return envoie();"

envoie(); renvoyant false quand KO et true quand OK ...

je met mon dernier code en date ^^

en fait je pensais que tout etait resolu jusqu'au moment ou je teste sous FF 2.0 et il lance sous thunderbird 1.5.

sous i'ai le bon resultat sous ie lance aussi thunderbird :

Code:

1
2
3
4
5
6
7
8
 
Mr
Nom :a
Prenom :a
Mail :@.
Login :a
Pass :a
Message :a

et sous FF

Code:

1
2
3
4
5
6
7
8
9
 
Mr
Nom :aa
Prenom :a
Mail :a@.
Login :a
Pass :a
Message :aa
civilite=Mr

maintenant 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<script language="javascript">
var civil= "";
 
	function existeChaine(chaine, sousChaine) {
		var pos = 0;
		var i = 0;
		var existe = false;
		while ((!existe) && (pos < chaine.length)) {
			if (chaine.charAt(pos) == sousChaine.charAt(0)) {
				while ((i < sousChaine.length) && (pos < chaine.length) && (chaine.charAt(pos) == sousChaine.charAt(i))) {
					pos++;
					i++;
				}
				existe = (i == sousChaine.length);
				i = 0;
			} else {
				pos++;
			}
		}
		return existe;
	}
 
	function verifSaisie (){
		var msgErreur = "";
		var frm = "Vous devez remplir le champ ";
		if (civil < 1) {
			msgErreur += "Veuillez selectionner une civilite.\n"; 
		}
		if (document.getElementById('nom').value.length < 1 ) {
		msgErreur += frm + "NOM.\n";
		}
		if (document.getElementById('prenom').value.length < 1) {
			msgErreur += frm +"PRENOM.\n"; 
		}
		if (document.getElementById('mail').value.length < 1) {
			msgErreur += frm + "E-MAIL.\n"; 	
		}else {
			if (existeChaine(document.getElementById('mail').value, '@')==false) {
				msgErreur += "Votre E-MAIL n'est pas valide.\n"; 
			}else {
			if (existeChaine(document.getElementById('mail').value, '.')==false) {
				msgErreur += "Votre E-MAIL n'est pas valide.\n"; 
			}
			}
		}
		if (document.getElementById('log').value.length < 1) {
			msgErreur += frm + "LOGIN.\n"; 
		}
		if (document.getElementById('pass').value.length < 1) {
			msgErreur += frm + "MOT DE PASSE.\n"; 
		}
		if (document.getElementById('message').value.length < 1) {
			msgErreur += frm + "Message.\n"; 
		}
		return msgErreur;
	}
 
	function envoie(){
		erreur = verifSaisie();
		if (erreur != null && erreur != "") {
		//affiche les erreurs dans une boite qui etait masquee
			if(document.getElementById('afficheerreur').style.visibility=="hidden"){
			  document.getElementById('afficheerreur').style.visibility="visible";
			  document.getElementById('erreursaisie').style.color="red";
			  document.getElementById('erreursaisie').style.fontWeight="bold";
			}
   		document.getElementById('erreursaisie').value=erreur;
			// affichage du message d'erreur
			alert(erreur);
		return false;
		} else {
		  if(document.getElementById('afficheerreur').style.visibility=="visible"){
			  document.getElementById('afficheerreur').style.visibility="hidden";
			  }
			var env="mailto:";
			env +="tt@";
			env +="t-t.fr";
			env +="?CC=" + document.getElementById('mail').value;
			env +="&subject=[tt]demande de login&body=";
			env += civil;
			env += "<br>Nom :";
			env += document.getElementById('nom').value;
			env += "<br>Prenom :";
			env += document.getElementById('prenom').value;
			env += "\<br>Mail :";
			env += document.getElementById('mail').value;
			env += "<br>Login :";
			env += document.getElementById('log').value;
			env += "\<br>Pass :";
			env += document.getElementById('pass').value;
			env += "<br>Message :";
			env += document.getElementById('message').value;
			document.envoi.action=env;
		}
	document.getElementById('nom').value="";
	document.getElementById('prenom').value="";
	document.getElementById('mail').value="";
	document.getElementById('log').value="";
	document.getElementById('pass').value="";
	document.getElementById('message').value="";
	}
	function enregistreChoix(civ){
		for (var i=0; i<civ.length;i++){
			if (civ[i].checked){
				civil=civ[i].value;
			}
		}
	}
 
</script>	
 
<form name="envoi" method="POST" enctype="text/plain" onSubmit="return envoie();">
<p><b>Mr<input type="radio" name="civilite" value="Mr" />&nbsp;Mme <input type="radio" name="civilite" value="Mme" />&nbsp;Mlle<input type="radio" name="civilite" value="Mlle" />&nbsp;</b></p>
<table border="0">
	<tr>
		<td><b>Nom</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" id="nom" size=30 maxlength=30/></td>
	</tr>
	<tr>
		<td><b>Prénom</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" id="prenom" size=20 maxlength=20/></td>
	</tr>
	<tr>
		<td><b>E-mail</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" id="mail" size=40 maxlength=40/></td>
	</tr>
	<tr>
		<td><b>Login souhaité</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" id="log" size=15 maxlength=15/></td>
	</tr>
	<tr>
		<td><b>Mot de passe</b></td>
		<td><b>&nbsp;:</b>&nbsp;<input type="text" id="pass" size=15 maxlength=15/></td>
	</tr>
</table>
<br>
<p>Décriver la ou les raisons pour lesquelles vous souhaité avoir un identifiant ansi quel type d'examen/projet vous souhaitez avoir accès</p>
<br>
<textarea id="message" cols="60" rows="5"></textarea>
<br>
<input type="submit" value="Envoyer" onclick="enregistreChoix(this.form.civilite);">
<input type="reset" value="Effacer">
<br><br>
<div id="afficheerreur" style="visibility: hidden">
	<table>
		<tr>
			<td><b><font color="red"><b>Attention des erreurs détectées dans la saisie :</b></font></td>
			<td><textarea id="erreursaisie" cols="45" rows="4"></textarea></td>
		</tr>
	</table>
</div>
</form>

et la je vois pas trop pourquoi il fait ca FF j'ai surement du zaper quelque chose ^^ ?

16/05/2007, 09h31
fey

bon en fait j'ai un peu modifie le code afin que tous sauf les bouton radion fonction uniquement avec des "id"

mais voila, c'est firefox qui envoie automatiquement alors que je lui est rien demande, tout les partie du formulaire qui a un "name"

quelqu'un sait comment je peux contourner ce probleme ?
parce qu'au pire je vois une solution c'est pas tres pratique :(

merci ;)
16/05/2007, 09h38
E.Bzz

Citation:

Envoyé par fey

mais voila, c'est firefox qui envoie automatiquement alors que je lui est rien demande, tout les partie du formulaire qui a un "name"

quelqu'un sait comment je peux contourner ce probleme ?

Mais le pb, c'est lequel, finallement ?
Le fonctionnement avec Thunderbird (post précédent) ?
Le submit se fait intempestivement ?
Certains champs sont envoyés alors qu'il ne devraient pas ?

A+
16/05/2007, 10h55
fey

je l'ai mis juste dans un post precedent (celui ou j'ai mis a jour le code), tant disque dans le precedent j'ai simplement decrit plus ou moins la cause de l'erreur

donc en gros quand c'est avec firefox il m'envoi tout les champs qui ont un "name" plus tout ceux que moi je lui dis d'envoyer, autrement dis j'ai plusieurs fois la meme information : notamment les boutons radios

et moi je veux uniquement envoyer les champs que j'ai defini dans ma fonction envoie()

merci ;)
16/05/2007, 11h03
E.Bzz

Citation:

Envoyé par fey

donc en gros quand c'est avec firefox il m'envoi tout les champs qui ont un "name" plus tout ceux que moi je lui dis d'envoyer, autrement dis j'ai plusieurs fois la meme information : notamment les boutons radios

et moi je veux uniquement envoyer les champs que j'ai defini dans ma fonction envoie()

Ton <form> génère l'url avec les champs qu'il contient.
Toi tu rajoutes les tiens dans l'url.
En fait, il vaudrait mieux enlever ton <form> qui ne sert à rien, ça serait plus propre (puisque tu le contournes) ;)

A+
16/05/2007, 13h56
fey

desole je suis tres debutant en javascript :(

la je comprend pas trop, je fais comment, parce que si j'enleve le <form> les deux "trucs" suivantes ne vont plus fonctionner correctement :

onSubmit="return envoie();"
onclick="enregistreChoix(this.form.civilite);"

parce que la je vois pas trop comment faire, je suppose qu'il faut que je change un peu la structure des fonctions, mais je vois pas encore trop comment faire.

tu peux m'eclairer la route ? ;)
16/05/2007, 14h27
E.Bzz

Enlever le <form> est pas une bonne idée (je viens de relire ton code) :mrgreen:
Juste le bouton submit à remplacer (parce que le onclick sur un type="submit" => pas glop !) ....
Essaye

Code:

<input type="button" value="Envoyer" onclick="enregistreChoix(this.form.civilite);envoie();">

A+
16/05/2007, 14h28
E.Bzz

... et il faut bien sûr aussi enlever le onsubmit du <form> ...

A+
16/05/2007, 15h46
fey

je viens de tester, et il efface tous les champs du formulaire quand je clique sur envoyer sans pour autant envoyer le mail

j'ai zape quelque chose ?

edit: je ne savais que dans un onClick on pouvait mettre plusieurs fonction ^^

et dans tous les cas merci de ton aide ;)

Citation:

Envoyé par fey

je viens de tester, et il efface tous les champs du formulaire quand je clique sur envoyer

Ca c'est toi qui lui a demandé à la fin de ta fonction :
Code:

1 2 3 4 5 6 document.getElementById('nom').value=""; document.getElementById('prenom').value=""; document.getElementById('mail').value=""; document.getElementById('log').value=""; document.getElementById('pass').value=""; document.getElementById('message').value="";
Citation:

Envoyé par fey

sans pour autant envoyer le mail

Là c'est moi qui ai oublié de te faire ajouter

Code:

document.forms['envoi'].submit();

juste après la ligne

Code:

document.envoi.action=env;

toujours dans la même fonction.
Tu devrais d'ailleurs corriger en

Code:

document.forms['envoi'].action=env;

A+

16/05/2007, 16h29
fey

effectivement, maintenant que j'ai vu le code ca parrait super logique

MAIS Firefox me rajoute toujours : civilite=Mr

alors que je n'en veux pas :(

ps: oui effectivement ^^ j'avais oublie de virer la reinitialisation des champs lol :p
16/05/2007, 16h43
E.Bzz

Citation:

Envoyé par fey

MAIS Firefox me rajoute toujours : civilite=Mr

Oui, là j'avoue que je vois pas pourquoi il te le donne 2 fois alors qu'il y est qu'une fois dans ton <form> :?
16/05/2007, 17h04
fey

ce truc je le recupere par une fonction et je le position dans mon env+= ...

comme je te disais plus haut, je ne sais pas pourquoi mais dans mon formulaire, a chaque moi que j'utilise un name="", firefox me l'envoi automatiquement avec sa valeur quand je fais mon mailto. :roll:
16/05/2007, 17h13
E.Bzz

Citation:

Envoyé par fey

dans mon formulaire, a chaque moi que j'utilise un name="", firefox me l'envoi automatiquement avec sa valeur quand je fais mon mailto. :roll:

Oui, c'est le mode de fonctionnement "classique" d'un form ...
Essaye de le passer en "GET" (au lieu de "POST").

A+
18/05/2007, 17h34
fey
bon voila, ca marche nickel
merci beaucoup pour l'aide :king:

1) finalement j'ai laisse en GET ^^
2) remplacer :
Code:

1 2 3 document.forms['envoi'].action=env; document.forms['envoi'].submit();
par
Code:

1 2 window.location=env;
sinon j'ai laisse la remie des champs a 0 dans la fonction car sinon il le fait pas quand j'envoie le mail ^^
j'ai surement fais d'autres modifs que je me rappel plus mais bon ^^

dans tous les cas merci beaucoup ;)