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?

lhankins

the <html:errors> tag checks for the following two properties for a "prefix" and "suffix" on the error message:

errors.footer
errors.header

This means you can do the following in your ApplicationResources.properties file :

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

RozanaZ

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
function highlightEmail()
{
      obj = document.getElementById("email");
      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>

ew0kian

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

ew0kian

ASKER

I increased the points to 500

Oliver_Dornauf

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

</style>
</head>

lhankins

>
> 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<html:errors property="someField"/></td>
<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.properties file.

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:errors property="someField">SomeField</html:errors></td>
<td><html:text property="someField"</td>

ew0kian

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.firstName" />*
</td>
<td>
<html:text property="firstName" />
</td>
</tr>
<td>
<bean:message key="userRegistration.lastName" />*
</td>
<td>
<html:text property="lastName" />
</td>

<tr>
<td>
<bean:message key="userRegistration.userName" />*
</td>
<td>
<html:text property="userName" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.email" />*
</td>
<td>
<html:text property="email" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.phone" />
</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.password" />*
</td>
<td>
<html:password property="password" />
</td>
</tr>
<tr>
<td>
<bean:message key="userRegistration.password" />*
</td>
<td>
<html:password property="passwordCheck" />
</td>
</tr>

<tr>
<td>
<bean:message key="userRegistration.birthDate" />
</td>
<td>
<html:text property="birthDate" />
</td>
</tr>

<tr>
<td>
<html:submit />
</td>
<td>
<html:cancel />
</td>
</tr>
</html:form>
</table>
</body>
</html>

lhankins

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.firstName" />*
</td>
<td>
<html:text property="firstName" />
</td>
</tr>
<td>
<html:errors property="lastName"/>
<bean:message key="userRegistration.lastName" />*
</td>
<td>
<html:text property="lastName" />
</td>

<tr>
<td>
<html:errors property="userName"/>
<bean:message key="userRegistration.userName" />*
</td>
<td>
<html:text property="userName" />
</td>
</tr>
<tr>
<td>
<html:errors property="email"/>
<bean:message key="userRegistration.email" />*
</td>
<td>
<html:text property="email" />
</td>
</tr>
<tr>
<td>
<html:errors property="phone"/>
<bean:message key="userRegistration.phone" />
</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.password" />*
</td>
<td>
<html:password property="password" />
</td>
</tr>
<tr>
<td>
<html:errors property="passwordCheck"/>
<bean:message key="userRegistration.password" />*
</td>
<td>
<html:password property="passwordCheck" />
</td>
</tr>

<tr>
<td>
<html:errors property="birthDate"/>
<bean:message key="userRegistration.birthDate" />
</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.missingRequiredField" ) );
}

if(lastName == null || lastName.length() == 0)
{
errors.add( "lastName", new ActionError( "errors.missingRequiredField" ) );
}

if(userName== null || userName.length() == 0)
{
errors.add( "userName", new ActionError( "errors.missingRequiredField" ) );
}

//--- <snip> continue this pattern for each required field

return errors;
}

----------------------------------------------------
And have at least the following in your ApplicationResources.properties file :

errors.header=<font color="red">
errors.footer=</font>

errors.missingRequiredField=Missing

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.missingRequiredField errors.footer

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.missingRequiredField property to blank. Where above we have this :

<tr>
<td>
<html:errors property="firstName"/>
<bean:message key="userRegistration.firstName" />*
</td>
</tr>

You could try changing it to :

<tr>
<td>
<html:errors property="firstName">
<bean:message key="userRegistration.firstName" />*
</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.missingRequiredField
<bean:message key="userRegistration.firstName" />*
errors.footer
</td>
</tr>

which, based on your properties file should be :

<tr>
<td>
<font color="red">
<bean:message key="userRegistration.firstName" />*
</font>
</td>
</tr>

Make sense...?

ew0kian

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(passwordCheck)) {
                  errors.add(
                  "password",
                  new ActionError ("userRegistration.password.nomatch"));
                  }
                  return errors;
                  }

lhankins

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

Computer101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial