vérification des champs d'un formulaire avant envoi

**fey** · 20/04/2007, 10h15

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 :

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

**E.Bzz** · 20/04/2007, 10h44

Bonjour,

Code :

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

 onSubmit="return envoie();"

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

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

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

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+

**fey** · 20/04/2007, 10h54

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

**E.Bzz** · 20/04/2007, 11h17

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

**fey** · 20/04/2007, 12h37

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

Code :

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

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

**E.Bzz** · 20/04/2007, 13h47

Pb de compatibilité

Code :

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

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

A+

**fey** · 20/04/2007, 15h44

ok merci je testerai cela

**fey** · 23/04/2007, 08h16

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 :

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

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

**E.Bzz** · 23/04/2007, 14h16

EDIT : Oups : j'ai bégayé

**E.Bzz** · 23/04/2007, 14h17

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.

**fey** · 23/04/2007, 14h22

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

**E.Bzz** · 23/04/2007, 14h28

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

**fey** · 23/04/2007, 15h12

bah ouais ^^
bon maintenant il faut que je me penche sur mon autre probleme

**E.Bzz** · 23/04/2007, 15h24

Code :

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

onsubmit="return envoie();"

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

**fey** · 15/05/2007, 14h17

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 :

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

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

et sous FF

Code :

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

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 :

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

**fey** · 16/05/2007, 09h31

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

**E.Bzz** · 16/05/2007, 09h38

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+

**fey** · 16/05/2007, 10h55

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

**E.Bzz** · 16/05/2007, 11h03

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+

**fey** · 16/05/2007, 13h56

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 ?

vérification des champs d'un formulaire avant envoi

JavaScript

Discussions similaires

Partager

Partager