struts/javascript - validation du formulaire

**kkkkkk** · 31/05/2007, 15h35

bonjour,
je travail actuellement sur une application web avec struts ,et je veux au lieu de faire la validation de mon formulaire avec validateForm(coté serveur),le faire coté client a l'aide de javascripts.
j'ai créer mon formulaire dans une page jsp et j'ai introduis un code javascripts pour vérifier ke tout les champs sont remplie,si non il affiche un message d'erreur.
le code marche parfaitement bien si les champs sont vide,mais kon tout les champs sont remplie, normalement il doit envoyer la requéte au serveurs pour k'elle puisse etre traiter,mais kon je click sur valider la requéte ne s'envoie pas,il ne donne rien est ce ke vous pouver me donner une solution et m'ader a resoudre le probléme

**bonano** · 31/05/2007, 16h00

Envoyé par kkkkkk

bonjour,
je travail actuellement sur une application web avec struts ,et je veux au lieu de faire la validation de mon formulaire avec validateForm(coté serveur),le faire coté client a l'aide de javascripts.
j'ai créer mon formulaire dans une page jsp et j'ai introduis un code javascripts pour vérifier ke tout les champs sont remplie,si non il affiche un message d'erreur.
le code marche parfaitement bien si les champs sont vide,mais kon tout les champs sont remplie, normalement il doit envoyer la requéte au serveurs pour k'elle puisse etre traiter,mais kon je click sur valider la requéte ne s'envoie pas,il ne donne rien est ce ke vous pouver me donner une solution et m'ader a resoudre le probléme

Peux tu montrer ton code. Car peux etre tu utilise onSubmit() = "ta fonction javascript"mais dans ta fonction tu retourne pas true si tous va bien.

**kkkkkk** · 31/05/2007, 16h10

merci pour avoir repondu a mon message

tout ce ke vous aver dis je lé déja mis dons mon code le voici:

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
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
<html> 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>changer le Mot de passe </title>
 
<script language="JavaScript">
 function Verif() 
 {
if((document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)&&
(document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)&&
(document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1))
{
alert('remplissze tout les champs');
}
 
else if (document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass.value!=document.forms[0].confmotpasse.value)
{
alert('la confirmation du mot de passe est incorrecte');
 
return false ;
}
else
{
return true;
 
}
}
</script>	
 
<style type="text/css">
<!--
.Style2 {	font-size: 12px;
	color: #0000C4;
}
.Style5 {	font-size: 12px;
	color: #FF0000;
}
#Layer1 {	position:absolute;
	left:132px;
	top:74px;
	width:362px;
	height:199px;
	z-index:1;
	background-color: #FFFFF2;
}
.Style1 {	color: #FFFFFF;
	font-weight: bold;
}
#Layer2 {	position:absolute;
	left:132px;
	top:40px;
	width:450px;
	height:35px;
	z-index:2;
	background-color: #33CC33;
}
-->
</style>
	</head>
	<body>
	<div id="Layer1" style="top: 74px; left: 132px; width: 379px; height: 224px;">
	<html:form action="/changer">
 
    <table border="0" style="top: 91px; height: 177px; left: 136px; width: 375px;">
 
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Ancien mot de passe :</span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		 <td valign="middle" align="center"><label><html:password property="amotpasse"/><html:errors property="amotpasse"/><br/>
		 </label><br></td>
		 </tr>
		<tr>
			<td width="250"><div align="right"><span class="Style2">Nouveau mot de passe : </span></div></td>
			<td width="10"><span class="Style5">(*)</span></td>
			<td valign="middle" align="center"><label><html:password property="nmotpass"/><html:errors property="nmotpass"/><br/>
			</label><br></td>
			</tr>
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Confirmer le mot de passe :<br></span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		<td valign="middle" align="center"><label><html:password property="confmotpasse"/><html:errors property="confmotpasse"/><br/>
		</label><br></td>
			</tr>
			<tr>
			<td width="20"><br></td>
 
 
         <td valign="middle" align="center"><label><html:button property="button" value="valider"  onclick="javascript:Verif()" /></label><br></td>
 
       <td valign="middle" align="center"><label><html:reset/></label><br></td>
      </tr>
     </table>
			</html:form>
			</div>
			<div class="Style1" id="Layer2" style="left: 132px; width: 379px;">
  <p>Changr le mot de passe </p>
</div>
	</body>
</html>

mais ca ne marche pas
j'attend votre reponse merci

**c_nvy** · 31/05/2007, 16h18

La soumission du formulaire ne se fait pas parce que tu utilises un tag html:button et non un tag html:submit.

Donc, pour provoquer la soumission du formulaire, il faut ajouter ceci dans ton javascript :

Code :

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

document.nomDeTonFormBean.submit() ;

Sinon, pour info, via le Validator, tu peux faire une validation seulement côté client.
Il est donc bien dommage de coder ton propre javascript.

**kkkkkk** · 31/05/2007, 16h28

vraiment vraiment merci
j'ai demander plusieur fois sur plusieur forum de me trouver une solution

ca marche
mais kon un champs est vide avant il affichais un message d'erreur et reste sur la meme page maint il affiche l'erreur mais donne une page blanche xx.do
comment faire pour kil reste toujour sur la méme page si un champs est vide ??
meri la reponse ca marche a merveil

**c_nvy** · 31/05/2007, 16h37

Ben, il faut mettre le submit au bon endroit dans ton javascript, soit seulement quand il n'y a pas d'erreurs de validation.

**kkkkkk** · 31/05/2007, 16h43

merci

**c_nvy** · 31/05/2007, 16h48

De rien.

Envoyé par kkkkkk

j'ai demander plusieur fois sur plusieur forum de me trouver une solution

La prochaine fois, pose la question directement sur ce forum, c'est le meilleur.

**kkkkkk** · 31/05/2007, 16h59

ca ne marche pas j'ai toujour le méme probléme il affiche l'erreur si un champs et vide et puis une page blanch xxx.do

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
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
<html> 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>changer le Mot de passe </title>
 
<script language="JavaScript">
 function Verif() 
 {
if((document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)&&
(document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)&&
(document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1))
{
alert('remplissze tout les champs');
}
 
else if (document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass.value!=document.forms[0].confmotpasse.value)
{
alert('la confirmation du mot de passe est incorrecte');
 
return false ;
}
else
{
return true;
document.ChangerForm.submit();
}
 
}
</script>	
 
<style type="text/css">
<!--
.Style2 {	font-size: 12px;
	color: #0000C4;
}
.Style5 {	font-size: 12px;
	color: #FF0000;
}
#Layer1 {	position:absolute;
	left:132px;
	top:74px;
	width:362px;
	height:199px;
	z-index:1;
	background-color: #FFFFF2;
}
.Style1 {	color: #FFFFFF;
	font-weight: bold;
}
#Layer2 {	position:absolute;
	left:132px;
	top:40px;
	width:450px;
	height:35px;
	z-index:2;
	background-color: #33CC33;
}
-->
</style>
	</head>
	<body>
	<div id="Layer1" style="top: 74px; left: 132px; width: 379px; height: 224px;">
	<html:form action="/changer">
 
    <table border="0" style="top: 91px; height: 177px; left: 136px; width: 375px;">
 
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Ancien mot de passe :</span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		 <td valign="middle" align="center"><label><html:password property="amotpasse"/><html:errors property="amotpasse"/><br/>
		 </label><br></td>
		 </tr>
		<tr>
			<td width="250"><div align="right"><span class="Style2">Nouveau mot de passe : </span></div></td>
			<td width="10"><span class="Style5">(*)</span></td>
			<td valign="middle" align="center"><label><html:password property="nmotpass"/><html:errors property="nmotpass"/><br/>
			</label><br></td>
			</tr>
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Confirmer le mot de passe :<br></span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		<td valign="middle" align="center"><label><html:password property="confmotpasse"/><html:errors property="confmotpasse"/><br/>
		</label><br></td>
			</tr>
			<tr>
			<td width="20"><br></td>
 
 
         <td valign="middle" align="center"><label><html:submit property="submit" value="valider"  onclick="javascript:Verif()" /></label><br></td>
 
       <td valign="middle" align="center"><label><html:reset/></label><br></td>
      </tr>
     </table>
			</html:form>
			</div>
			<div class="Style1" id="Layer2" style="left: 132px; width: 379px;">
  <p>Changr le mot de passe </p>
</div>
	</body>
</html>

**kkkkkk** · 31/05/2007, 17h02

vous savez ce kil fait ? il affiche l'erreur et en méme temps renvoie la requéte pour la traiter car kon j'execute je voie les resultat de l'execution et j'ai constater cele

**bonano** · 31/05/2007, 17h25

Envoyé par kkkkkk

vous savez ce kil fait ? il affiche l'erreur et en méme temps renvoie la requéte pour la traiter car kon j'execute je voie les resultat de l'execution et j'ai constater cele

Dans ta fonction Verif(); t'ai sur dés qu'il ya une champ vide elle renvoi false, moi je vois pas ça.

utilise un boolean initialisé à true et met le à chaque fois à false dans test qui sont pas bon et à la fin tu test ce boolean, si c'est false return false sinon return true et faire le submit.

**kkkkkk** · 01/06/2007, 19h51

bonjour
wé des qu'il ya un champs vide il retourn un false un message d'erreur qui s'affiche puis kon je ferme la fenétre d'erreur ou quand je click sue le bouton ok il envoie la requéte alors que normalement la requéte ne dois étre envoyé que lorsque tout les champs sont remplie
je ne sais pas comment faire mon programme (traitement )march trés bien les message d'erreur aussi ils s'afficge des qu'il ya un champ vide c ce probléme qui m'enerve
je vous remontre mon dernier 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
<html> 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>changer le Mot de passe </title>
 
<script language="JavaScript">
 function Verif()
 
 {
if((document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)&&
(document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)&&
(document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1))
{
alert('Attention,il faut remplire tout les champs marquées en etoile(*)');
 
}
 
else if (document.forms[0].amotpasse==null || document.forms[0].amotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass==null || document.forms[0].nmotpass.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].confmotpasse==null || document.forms[0].confmotpasse.value.length<1)
{
alert('Attention!! remplissez tout les champs ');
}
else if (document.forms[0].nmotpass.value!=document.forms[0].confmotpasse.value)
{
alert('la confirmation du mot de passe est incorrecte');
 
return false ;
}
 else
{
 return true;
}
}
</script>
<html:form action="/changer">
 
    <table border="0" style="top: 91px; height: 177px; left: 136px; width: 375px;">
 
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Ancien mot de passe :</span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		 <td valign="middle" align="center"><label><html:password property="amotpasse"/><html:errors property="amotpasse"/><br/>
		 </label><br></td>
		 </tr>
		<tr>
			<td width="250"><div align="right"><span class="Style2">Nouveau mot de passe : </span></div></td>
			<td width="10"><span class="Style5">(*)</span></td>
			<td valign="middle" align="center"><label><html:password property="nmotpass"/><html:errors property="nmotpass"/><br/>
			</label><br></td>
			</tr>
		<tr>
 
		<td width="250"><div align="right"><span class="Style2">Confirmer le mot de passe :<br></span></div></td>
		<td width="10"><span class="Style5">(*)</span></td>
		<td valign="middle" align="center"><label><html:password property="confmotpasse"/><html:errors property="confmotpasse"/><br/>
		</label><br></td>
			</tr>
			<tr>
			<td width="20"><br></td>
 
 
         <td valign="middle" align="center"><label><html:submit property="submit" value="valider"  onclick="Verif()" /></label><br></td>
 
       <td valign="middle" align="center"><label><html:reset/></label><br></td>
      </tr>
     </table>
			</html:form>

trouver moi une solution svp

**Mister Nono** · 01/06/2007, 23h40

Il me semble que tu utilises struts :

Code :

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

1
2
 
<html:form action="/changer">

Alors peut-être il faudrait mettre :

Code :

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

1
2
 
<html:form action="/changer.do">

... mais cela dépend de ta configuration dans le web.xml.

De plus fais la vérification du formulaire dans le ActionForm lié à ta page (méthode validate()) : ce sera vraiment plus efficace et bien plus facile à écrire.

Enfin, quand dans le javascript tu écris :

Code :

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

1
2
3
 
return true;
document.ChangerForm.submit();

... la ligne se trouvant après return true; ne sert plus à rien.

Bon courage.

**kkkkkk** · 02/06/2007, 00h42

merci pour avoir répondu ,au debut ja'i fait la valisation de mon formulaire avec la fonction validate mais c'est pas joli les message d'erreur s'affiche sur mon formulaire et ca perturbe tout(coté esthétique),,et ce n'est pas une fenétre comme avec javascript.de plus le faite de faire une validation d'un formulaire coté serveur s'est pas du tout pratique ,pourquoi?? l'utilisateur ne va pas attendre plusieurs minute en attendant que le serveur lui répond si le formulaire est valide ou non ca sera long par contre coté client c'est tout de suite ,c'est pouquoi j'ai préféré faire javascripts.

**kkkkkk** · 02/06/2007, 00h51

que je met changer.do ou non ca ne change rien le probléme est le méme
mon probléme c'est pas le programme mon programme marche bien tout marce bien seulement au lieu d'afficher les message d'erreur et réafficher la méme page sans envoyé la requéte il envoie la requéte et afiche une page .do
si non vous n'avez pas d'autre solution???

**Mister Nono** · 02/06/2007, 12h07

Franchement je pense que le validate est la meilleure solution et c'est ce que tout la majorité fait.

**kkkkkk** · 02/06/2007, 14h19

ok merci pour votre conseils

**c_nvy** · 02/06/2007, 14h46

Envoyé par c_nvy

Sinon, pour info, via le Validator, tu peux faire une validation seulement côté client.
Il est donc bien dommage de coder ton propre javascript.

Ci-dessus une remarque que j'ai déjà fait dans la discussion.
A toi de voir si tu veux en tenir compte.

Et si tu as besoin d'aide pour la mise en oeuvre, n'hésite pas à ouvrir une nouvelle discussion.

**kkkkkk** · 03/06/2007, 00h01

vous parlez du fichier validator.xml?,oui mais je ne sais pas comment faire ,je n'est jamais entendu parler c'est pourquoi j'ai pas pris en compte votre remarque. je vé ouvrire une nouvelle discussion sur ca espérant trouver une solution
merci

**bonano** · 04/06/2007, 11h20

Envoyé par kkkkkk

que je met changer.do ou non ca ne change rien le probléme est le méme
mon probléme c'est pas le programme mon programme marche bien tout marce bien seulement au lieu d'afficher les message d'erreur et réafficher la méme page sans envoyé la requéte il envoie la requéte et afiche une page .do
si non vous n'avez pas d'autre solution???

C'est résolu ton pb? sinon, c'est normal que ton formulaire est validé meme si ta fonction renvoi false. car il faut mettre ta fonction Verif dans onsubmit de formulaire et pas de onclick de bouton, car en tous cas ton formulaire sera submitter avec le bouton <html:submit ...> sauf si tu l'a met dans onsubmit à ce momentn validation dans le cas ou retourn true.

struts/javascript - validation du formulaire

Struts 1 Java

Discussions similaires

Partager

Partager