struts/javascript - validation du formulaire

Version imprimable

31/05/2007, 15h35
kkkkkk

struts/javascript - validation du formulaire

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
31/05/2007, 16h00
bonano

Citation:

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.

merci pour avoir repondu a mon message:P
tout ce ke vous aver dis je lé déja mis dons mon code le voici:

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

31/05/2007, 16h18
c_nvy

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:

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.;)
31/05/2007, 16h28
kkkkkk

vraiment vraiment merci
j'ai demander plusieur fois sur plusieur forum de me trouver une solution :lol:
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:D :D :D
31/05/2007, 16h37
c_nvy

Ben, il faut mettre le submit au bon endroit dans ton javascript, soit seulement quand il n'y a pas d'erreurs de validation.
31/05/2007, 16h43
kkkkkk

:D :D :D merci
31/05/2007, 16h48
c_nvy

De rien.;)

Citation:

Envoyé par kkkkkk

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

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

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:

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>

31/05/2007, 17h02
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
31/05/2007, 17h25
bonano

Citation:

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.

help

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:

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

01/06/2007, 23h40
Mister Nono
Il me semble que tu utilises struts :
Code:

1 2 <html:form action="/changer">
Alors peut-être il faudrait mettre :
Code:

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

Enfin, quand dans le javascript tu écris :
Code:

1 2 3 return true; document.ChangerForm.submit();
... la ligne se trouvant après return true; ne sert plus à rien. :mrgreen:

Bon courage. ;)
02/06/2007, 00h42
kkkkkk

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.
02/06/2007, 00h51
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??? :cry:
02/06/2007, 12h07
Mister Nono

Franchement je pense que le validate est la meilleure solution et c'est ce que tout la majorité fait. ;)
02/06/2007, 14h19
kkkkkk

ok merci pour votre conseils ;)
02/06/2007, 14h46
c_nvy

Citation:

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.;)
03/06/2007, 00h01
kkkkkk

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 :D ;)
04/06/2007, 11h20
bonano

Citation:

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

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.
04/06/2007, 23h25
kkkkkk

merci pour votre aide je vais essayer :D
04/06/2007, 23h41
kkkkkk

j'ai remplacer onclick par :<html:submit property="submit" value="valider" onsubmit="Verif()"/>mais ca done cette erreur sur tomcat:
org.apache.jasper.JasperException: /form/changer.jsp(103,51) L'attribut onsubmit est incorrect pour le tag submit d'après la TLD indiquée
déja le onsubmit n'est pas reconnu je crois sur la page jsp(elle est souligné en jaune)
05/06/2007, 08h44
bonano

Citation:

Envoyé par kkkkkk

j'ai remplacer onclick par :<html:submit property="submit" value="valider" onsubmit="Verif()"/>mais ca done cette erreur sur tomcat:
org.apache.jasper.JasperException: /form/changer.jsp(103,51) L'attribut onsubmit est incorrect pour le tag submit d'après la TLD indiquée
déja le onsubmit n'est pas reconnu je crois sur la page jsp(elle est souligné en jaune)

onsubmit dans le form: <html:form action="/changer" onsubmit="Verif()"> et pas dans le bouton, dans le bouton tu met just:
<html:submit property="submit" value="valider" />
05/06/2007, 08h56
Mister Nono

Citation:

Envoyé par kkkkkk

j'ai remplacer onclick par :<html:submit property="submit" value="valider" onsubmit="Verif()"/>mais ca done cette erreur sur tomcat:
org.apache.jasper.JasperException: /form/changer.jsp(103,51) L'attribut onsubmit est incorrect pour le tag submit d'après la TLD indiquée
déja le onsubmit n'est pas reconnu je crois sur la page jsp(elle est souligné en jaune)

Et là, il faut chercher un pitit chouya. :cfou:

Par exemple : :google2:

A+ ;)
05/06/2007, 11h22
kkkkkk

merci pour votre aide
mister mano ,t'inkiéte je asse tout mon temps a chercher sur google (je fait plus d'efforts) je trouve beaucoup de chose mais quand je l'applique ca ne marche pas c'est pourqoui je demande l'aide ;)