ew0kian
asked on
jakarta struts and validation
I have a working form that uses the struts validation framework.
but i want it to instead of just saying "email is invalid"... i want it to also highlight the text infront of the field in red. any ideas as to the best way to implement this?
but i want it to instead of just saying "email is invalid"... i want it to also highlight the text infront of the field in red. any ideas as to the best way to implement this?
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function highlightEmail()
{
obj = document.getElementById("e mail");
obj.style.color = 'red';
obj.style.fontWeight = 'bold';
obj.style.backgroundColor = 'pink';
}
</script>
</HEAD>
<BODY>
<form name="form1" id="form1" action="http://127.0.0.1">
<input type="text" name="email" id="email"><br>
<input type="button" onClick="javascript: highlightEmail()" value="highlight email">
</form>
</BODY>
</HTML>
<HEAD>
<TITLE></TITLE>
<script>
function highlightEmail()
{
obj = document.getElementById("e
obj.style.color = 'red';
obj.style.fontWeight = 'bold';
obj.style.backgroundColor = 'pink';
}
</script>
</HEAD>
<BODY>
<form name="form1" id="form1" action="http://127.0.0.1">
<input type="text" name="email" id="email"><br>
<input type="button" onClick="javascript: highlightEmail()" value="highlight email">
</form>
</BODY>
</HTML>
ASKER
I dont think you guys understand what im trying to do. i want the form to highlight the text in front of each invalid field in a red color. how can i catch the validator framework's error output, and use it to highlight the text after pushing "submit" ???
ASKER
I increased the points to 500
This is not supported by struts directly. Normaly with struts you put error messages close to the causing field.
Maybe you can try some CSS acrobatics.
Use for every formfield label a different css class ( <p class="field1"></p> <p class="field2"></p> and so on)
for every field define an errormessage (in your message resource) like : p.field1 { color:red }
In your jsp (head section)you put something like:
<head>
<logic:messagesPresent>
<style type="text/css">
<!--
<html:messages id="error">
<bean:write name="error"/>
</html:messages>
-->
</style>
</head>
Maybe you can try some CSS acrobatics.
Use for every formfield label a different css class ( <p class="field1"></p> <p class="field2"></p> and so on)
for every field define an errormessage (in your message resource) like : p.field1 { color:red }
In your jsp (head section)you put something like:
<head>
<logic:messagesPresent>
<style type="text/css">
<!--
<html:messages id="error">
<bean:write name="error"/>
</html:messages>
-->
</style>
</head>
>
> I dont think you guys understand what im trying to do. i want the form to highlight the text in front of each invalid field in a red color. how can i catch > the validator framework's error output, and use it to highlight the text after pushing "submit" ???
>
Using <html:errors> (with the property attribute) can put each individual error in front of the field for which it is associated (in red). I realize this is not <exactly> what you're asking for, but its pretty close. You can do something like this :
<td class="labelTd">SomeField<
<td><html:text property="someField"</td>
The <html:errors> tag above will ONLY display something if there is an error with a name of "someField". When you're doing the validation, you just add the errors like this :
public ActionErrors validate( ActionMapping aMapping, HttpServletRequest aRequest )
{
ActionErrors errors = new ActionErrors();
// if some condition :
if(...)
{
errors.add( "someField", new ActionError( "errors.somekey" ) );
}
Where "errors.somekey" is a property value in your ApplicationResources.prope
If you really want your original field value to show up in red too, you could probably change the above sniippet to the following (assuming you have already defined the errors.header and errors.footer properties as I described my first post).
<td class="labelTd"><html:erro
<td><html:text property="someField"</td>
ASKER
Could you tell me how to modify this html to do what you are saying
<%@ taglib uri="/tags/struts-html" prefix="html"%>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<html>
<head>
<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
<html:errors/>
<table>
<html:form action="userRegistration">
<tr>
<td>
<bean:message key="userRegistration.firs tName" />*
</td>
<td>
<html:text property="firstName" />
</td>
</tr>
<td>
<bean:message key="userRegistration.last Name" />*
</td>
<td>
<html:text property="lastName" />
</td>
<tr>
<td>
<bean:message key="userRegistration.user Name" />*
</td>
<td>
<html:text property="userName" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.emai l" />*
</td>
<td>
<html:text property="email" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.phon e" />
</td>
<td>
<html:text property="phone" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.fax" />
</td>
<td>
<html:text property="fax" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.pass word" />*
</td>
<td>
<html:password property="password" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.pass word" />*
</td>
<td>
<html:password property="passwordCheck" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.birt hDate" />
</td>
<td>
<html:text property="birthDate" />
</td>
</tr>
<tr>
<td>
<html:submit />
</td>
<td>
<html:cancel />
</td>
</tr>
</html:form>
</table>
</body>
</html>
<%@ taglib uri="/tags/struts-html" prefix="html"%>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<html>
<head>
<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
<html:errors/>
<table>
<html:form action="userRegistration">
<tr>
<td>
<bean:message key="userRegistration.firs
</td>
<td>
<html:text property="firstName" />
</td>
</tr>
<td>
<bean:message key="userRegistration.last
</td>
<td>
<html:text property="lastName" />
</td>
<tr>
<td>
<bean:message key="userRegistration.user
</td>
<td>
<html:text property="userName" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.emai
</td>
<td>
<html:text property="email" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.phon
</td>
<td>
<html:text property="phone" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.fax"
</td>
<td>
<html:text property="fax" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.pass
</td>
<td>
<html:password property="password" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.pass
</td>
<td>
<html:password property="passwordCheck" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.birt
</td>
<td>
<html:text property="birthDate" />
</td>
</tr>
<tr>
<td>
<html:submit />
</td>
<td>
<html:cancel />
</td>
</tr>
</html:form>
</table>
</body>
</html>
For the simple way - change the JSP to :
--------------------------
<%@ taglib uri="/tags/struts-html" prefix="html"%>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<html>
<head>
<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
<table>
<html:form action="userRegistration">
<tr>
<td>
<html:errors property="firstName"/>
<bean:message key="userRegistration.firs
</td>
<td>
<html:text property="firstName" />
</td>
</tr>
<td>
<html:errors property="lastName"/>
<bean:message key="userRegistration.last
</td>
<td>
<html:text property="lastName" />
</td>
<tr>
<td>
<html:errors property="userName"/>
<bean:message key="userRegistration.user
</td>
<td>
<html:text property="userName" />
</td>
</tr>
<tr>
<td>
<html:errors property="email"/>
<bean:message key="userRegistration.emai
</td>
<td>
<html:text property="email" />
</td>
</tr>
<tr>
<td>
<html:errors property="phone"/>
<bean:message key="userRegistration.phon
</td>
<td>
<html:text property="phone" />
</td>
</tr>
<tr>
<td>
<html:errors property="fax"/>
<bean:message key="userRegistration.fax"
</td>
<td>
<html:text property="fax" />
</td>
</tr>
<tr>
<td>
<html:errors property="password"/>
<bean:message key="userRegistration.pass
</td>
<td>
<html:password property="password" />
</td>
</tr>
<tr>
<td>
<html:errors property="passwordCheck"/>
<bean:message key="userRegistration.pass
</td>
<td>
<html:password property="passwordCheck" />
</td>
</tr>
<tr>
<td>
<html:errors property="birthDate"/>
<bean:message key="userRegistration.birt
</td>
<td>
<html:text property="birthDate" />
</td>
</tr>
<tr>
<td>
<html:submit />
</td>
<td>
<html:cancel />
</td>
</tr>
</html:form>
</table>
</body>
</html>
--------------------------
Then add the following type logic to your Form validation method :
public ActionErrors validate( ActionMapping aMapping, HttpServletRequest aRequest )
{
ActionErrors errors = new ActionErrors();
if(firstName == null || firstName.length() == 0)
{
errors.add( "firstName", new ActionError( "errors.missingRequiredFie
}
if(lastName == null || lastName.length() == 0)
{
errors.add( "lastName", new ActionError( "errors.missingRequiredFie
}
if(userName== null || userName.length() == 0)
{
errors.add( "userName", new ActionError( "errors.missingRequiredFie
}
//--- <snip> continue this pattern for each required field
return errors;
}
--------------------------
And have at least the following in your ApplicationResources.prope
errors.header=<font color="red">
errors.footer=</font>
errors.missingRequiredFiel
At runtime, if the form fails validation for say, the firstName field, it will expand the following :
<html:errors property="firstName"/>
Into :
errors.header errors.missingRequiredFiel
Which, from our properties would translate to :
<font color="red"> Missing </font>
This will cause a red "Missing" text to appear to the left of your field names in your form. This is a standard pattern - get it working this way first.
Now - with respect to your original desire to have <only> the field title show up in red (with no specific error message), you could modify the pattern I'm suggesting above slightly to do this by changing use of the <html:errors> tag above and then setting the errors.missingRequiredFiel
<tr>
<td>
<html:errors property="firstName"/>
<bean:message key="userRegistration.firs
</td>
</tr>
You could try changing it to :
<tr>
<td>
<html:errors property="firstName">
<bean:message key="userRegistration.firs
</html:errors>
</td>
</tr>
In this case, at run time, if there is an error with a key of "firstName" it should get expanded to the following :
<tr>
<td>
errors.header
errors.missingRequiredFiel
<bean:message key="userRegistration.firs
errors.footer
</td>
</tr>
which, based on your properties file should be :
<tr>
<td>
<font color="red">
<bean:message key="userRegistration.firs
</font>
</td>
</tr>
Make sense...?
ASKER
thank you so much for helping me. but i am still a little confused on how to implement this because i'm using a validatorform so all the validation stuff is done through the validation.xml file. so all the validation pretty much other than the password checking is done through xml file. this is what my java looks like:
public ActionErrors validate(
ActionMapping mapping,
HttpServletRequest request) {
ActionErrors errors =
super.validate(mapping, request);
if (errors==null) errors = new ActionErrors();
if (!password.equals(password Check)) {
errors.add(
"password",
new ActionError ("userRegistration.passwor d.nomatch" ));
}
return errors;
}
public ActionErrors validate(
ActionMapping mapping,
HttpServletRequest request) {
ActionErrors errors =
super.validate(mapping, request);
if (errors==null) errors = new ActionErrors();
if (!password.equals(password
errors.add(
"password",
new ActionError ("userRegistration.passwor
}
return errors;
}
If you can figure out how to specify the associated ActionError key in the the validation XML file, you can use the solution I listed above.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
errors.footer
errors.header
This means you can do the following in your ApplicationResources.prope
errors.header=<font color="red">
errors.footer=</font>
Now when a error message is printed via <html:errors>, it will be preceeded by a <font color="red"> and followed up by a </font> (which will accomplish what you're looking for).
For further details, see :
http://husted.com/struts/tips/017.html