Changement de couleur des champs text en cas d'erreur de validation

**Snyper** · 19/04/2009, 11h42

Bonjour,

J'ai un problème ou plutôt, je ne vois vraiment pas comment faire ça...

Voilà j'ai une validation de deux camps, nom et password, je valide donc ce formulaire(DynaValidatorForm) avec ces deux champs, si les champs ne satisfassent pas les critères que j'ai mis dans un fichier appelé validation.xml et voici sont contenu pour les deux champs en question:

<form name="loginForm">
<field property="nombre" depends="required, minlength, maxlength">
<arg0 key="label.nombre" />

<arg1 name="minlength" key="${var:minlength}" resource="false"/>
<arg2 name="maxlength" key="${var:maxlength}" resource="false"/>
<var>
<var-name>minlength</var-name>
<var-value>3</var-value>
</var>
<var>
<var-name>maxlength</var-name>
<var-value>50</var-value>
</var>
</field>

<field property="password" depends="required, minlength,maxlength">
<arg0 key="label.password" />
<arg1 name="minlength" key="${var:minlength}" resource="false" />
<arg2 name="maxlength" key="${var:maxlength}" resource="false" />
<var>
<var-name>minlength</var-name>
<var-value>3</var-value>
</var>
<var>
<var-name>maxlength</var-name>
<var-value>30</var-value>
</var>
</field>

</form>

Dans une jsp j'ai ce paramètre pour afficher une validation en cas d'erreur:

<html:errors/>, si les champs sont incorrect alors j'obtiens bien les messages d'erreur.

Maintenant ce que je ne sais pas faire

, c'est que j'aimerais changer de couleur les champs de textes si la validation est incorrect, pour être plus claire je voudrais appeler une fonction javaScript si le contenu de <html:errors/> n'est pas vide...

Je vous remercie d'avance .

**c_nvy** · 19/04/2009, 12h10

Si tu utilises une version de Struts supérieure ou égale à la 1.2.5, tu peux utiliser les attributs errorStyle ou errorStyleClass du tag html:text.

Sinon, tu peux tester la présence de messages d'erreur sur les champs via le tag logic:messagesPresent et mettre un style particulier dans ce cas :

Code :

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

1
2
3
4
5
6
7
<logic:messagesPresent property="nomDuChamp">
   <td style="color:red;">
</logic:messagesPresent>
<logic:messagesNotPresent property="nomDuChamp">
   <td>
</logic:messagesNotPresent>
...

**Snyper** · 19/04/2009, 12h24

Bonjour,

Code :

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

1
2
3
4
5
6
7
	<table bgcolor="#cccddd" border="1" align="center">
		<tr>
			<td><b><bean:message key="label.nom" /></b></td>
			<td><html:text property="nom" name="loginForm">*&nbsp:</html:text></td>
		</tr>
		<tr>
......

et là je ne vois pas comment utiliser :

Code :

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

1
2
3
4
 
<logic:messagesPresent property="nom">
   <td style="color:red;">
</logic:messagesPresent>

et aussi on imagine que je veuilles appeler une fonction javaScript entre

Code :

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

<logic:messagesPresent property="nom">

maFonctionJavaScript

Code :

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

</logic:messagesPresent>

Merci

**c_nvy** · 19/04/2009, 12h33

Pourquoi vouloir à tout prix utiliser du Javascript ?

Avec la deuxième solution que j'ai donné, ça donnerait ceci :

Code :

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

1
2
3
4
5
6
7
8
<logic:messagesPresent property="nom">
   <td style="color:red;">
</logic:messagesPresent>
<logic:messagesNotPresent property="nom">
   <td>
</logic:messagesNotPresent>
     <html:text property="nom">*&nbsp:</html:text>
   </td>

**Snyper** · 19/04/2009, 12h42

Ok je change mes bibliothèque vers struts 1.2.6 je test errorStyle et aussi cette solution....

et je reviens

**Snyper** · 19/04/2009, 13h08

je ne vois pas ce qui ne marche pas mais j'ai ça...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<table bgcolor="#cccddd" border="1" align="center">
		<tr>
			<td><b><bean:message key="label.nom" /></b></td>
			<logic:messagesPresent property="nom">
		 		<td style="color:#FF6600;">
		 	</logic:messagesPresent>
		 	<logic:messagesNotPresent property="nom">
  				 <td>
			</logic:messagesNotPresent>
		 	<html:text property="nom" name="loginForm">*&nbsp:</html:text></td>
		</tr>
		<tr>

et rien ni fait,

j'ai aussi changé les bibliothèque de struts ver une version 1.2.6 et l'attribut errorStyle n'est pas reconnu...

**Snyper** · 19/04/2009, 13h27

Je vien de faire du debug est ça marche bien, j'ai mi du text en dur pour voir si le texte était écrit à la page et ça marche... la couleur du champ de texte elle ne change pas mais ça je ne comprend pas pourquoi...

Code :

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

1
2
3
4
5
6
7
8
	<table bgcolor="#cccddd" border="1" align="center">
		<tr>
			<td><b><bean:message key="label.nombre" /></b></td>
			<logic:messagesPresent property="nombre">
		 		<td style="color:#FF6600;">
		 		Si la validation n'est pas ok , ce texte s'imprime
		 	</logic:messagesPresent>
		 	<logic:messagesNotPresent property="nombre">

et je vérifie bien que le texte s'imprime bien :Si la validation n'est pas ok , ce texte s'imprime

j'ai changer mes bibliothèques vers la version 1.2.6 et la <html:text property="nom" errorStyle="color:red;"/> ne marche pas..... j'ai l'information que cette attribut n'est pas définit.

**Snyper** · 19/04/2009, 13h40

Je te (vous) remercie ça marche, je n'avais pas les bonnes versions des tld ni des dtd, et maintenant ça marche, ce que je ne comprends toujours pas c'est le changement de la textBox qui ne marche pas ,mais ce n'est pas grave

Merci beaucoup et a+

**c_nvy** · 19/04/2009, 13h40

Envoyé par Snyper

Je vien de faire du debug est ça marche bien, j'ai mi du text en dur pour voir si le texte était écrit à la page et ça marche... la couleur du champ de texte elle ne change pas mais ça je ne comprend pas pourquoi...

La couleur du champ ne changera que si tu saisis un texte qui n'a pas la bonne longueur. Dans le cas où il n'est pas renseigné, il ne changera évidemment pas de couleur puisqu'il n'y a rien dans le champ.
Par contre, il y a un truc que je ne comprends pas bien. Le nom du champ est nom ou nombre ?
Il faut que ce soit le même nom de champ dans l'attribut property des tags html:text et logic:messagesPresent de la jsp et dans l'attribut property de la balise field du fichier validation.xml.

Envoyé par Snyper

j'ai changer mes bibliothèques vers la version 1.2.6 et la <html:text property="nom" errorStyle="color:red;"/> ne marche pas..... j'ai l'information que cette attribut n'est pas définit.

utilises-tu bien la tld struts-html.tld de Struts 1.2.6 ?

**Snyper** · 19/04/2009, 13h46

Oui la validation marche bien et je test en mode debug et je m'aperçois que je passe bien par:

Code :

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

<td style="color:#FF6600;">

si la validation n'est pas correct, mais celá ne produit aucun effet....

oui le champ et nombre mais j'ai traduit pour pouvoir posté ici

dans le fichier validation.xml il s'appelle effectivement nombre...

mais

Code :

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

errorStyle="color:red;"

marche à merveille et le texte change de couleur.

**c_nvy** · 19/04/2009, 13h48

En fait, je viens juste de penser que, pour que la zone de saisie s'affiche en rouge, il faudrait tout simplement utiliser background-color à la place de color dans l'attribut style de la balise <td>.

**Snyper** · 19/04/2009, 14h03

Ça marche impeccable! Merci pour toutes ces réponses et juste une dernière question, je sais appeler des méthodes javaScript dans des formulaire avec OnChange et autre....

Comment appeler ces méthode comme dans l'exemple:

Code :

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

1
2
3
4
	<logic:messagesPresent property="nombre">
		 		<td style="background-color:#FF6600;">
		 		(Appelle de ma méthode javaScript )
		 	</logic:messagesPresent>

merci.

**c_nvy** · 19/04/2009, 14h06

En général, l'appel d'une fonction javascript se fait sur un évènement de type onchange, onclick, ...

Peux-tu préciser exactement pourquoi tu veux appeler une fonction Javascript dans ce cas précis ?

**Snyper** · 19/04/2009, 14h07

rien de spécial je voudrais juste savoir si c'est possible et si oui comment, peut-être dans un futur proche je pourrais en avoir besoin....

**c_nvy** · 19/04/2009, 14h25

Tu dois bien avoir une idée derrière la tête sinon, je ne vois pas pourquoi tu poserais la question. Enfin, manifestement, tu ne souhaites pas le dire.
Si ça a un rapport avec la validation, pour info, le Validator te permet de faire une validation en Javascript avant de faire la validation côté serveur.

Sinon, je ne suis pas très forte en javascript mais tu dois pouvoir exécuter du code javascript en le mettant dans une balise script :

Code :

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

1
2
3
4
5
6
<logic:messagesPresent property="nombre">
	<td style="background-color:#FF6600;">
	<script>
		alert("erreur");
	</script>
</logic:messagesPresent>

**Snyper** · 19/04/2009, 15h11

D'accord je pensais qu'il y avais un <html:javascript> qui pourait servire...

Merci encore!

**c_nvy** · 19/04/2009, 15h13

Le tag html:javascript est utile lorsque tu veux mettre en oeuvre la validation javascript du Validator.

**Snyper** · 19/04/2009, 15h30

Maintenant j'ai ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
	<table bgcolor="#cccddd" border="1" align="center">
		<tr>
			<td><b><bean:message key="label.nom" /></b></td>
			<logic:messagesPresent property="nomb">
		 		<td>
		 		<script>
		 			test(this);
		 		</script>
 
.......

dans ma jsp je déclare la function test de cette façon:

Code :

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

1
2
3
4
        function test(loginForm){
        	loginForm.nombre.style.backgroundColor = '#FF9900';
        	alert("ERREUR");
       }

mais rien......

**c_nvy** · 19/04/2009, 15h39

Fais un test en mettant le code javascript directement dans la balise script :

Code :

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

1
2
3
4
5
6
7
<logic:messagesPresent property="nomb">
	<td>
	<script>
           	   loginForm.nombre.style.backgroundColor = '#FF9900';
        	   alert("ERREUR");
 	</script>
</logic:messagesPresent>