Configuration for Client side Validation using Struts

 

Doing server side validation of submitted form is a mandatory requirement for any useful web application. Struts along with Dyna validator is a convenient way of doing server side validation without writing validate() method of form bean. In this article, the same approach of using dyna validation is further enhanced to provide javascript validation of the submitted form.

 

Web.xml configuration

In Web.xml, reference to struts html tag library should be present. While this is not a requirement of later version of Servlet specification, it is nevertheless a good idea to have the taglib dependencies specified in one place.

 

<taglib>

<taglib-uri>/tld/struts-html</taglib-uri>

<taglib-location>/WEB-INF/tld/struts-html.tld</taglib-location>

</taglib>

 

 

 

In JSP:

Use this taglib directive to refer to struts-html.tld (the name is as per <taglib-uri> defined in web.xml above).

 

<%@ taglib uri="/tld/struts-html" prefix="html" %>

 

Further code examples demonstrate a form for adding profile of a user.

 

The body of AddUserForm.jsp :

For simplicity, city and state are given as text fields. Note the addition of javascript validation specific code in bold.

 

 

<h1>Enter your Profile:</h1>

<html:form action="/addUser" onsubmit="return validateAddUserForm(this);">

Name: <html:text property="name"/>

<html:errors property="name" /><br>

Street Address: <html:text property="address"/>

<html:errors property="address" /><br>

City: <html:text property="city"/>

<html:errors property="city" /><br>

State: <html:text property="state"/>

<html:errors property="state" /><br>

Postal Code: <html:text property="postalCode" maxlength="6" size="6" />

<html:errors property="postalCode" /><br>

Profile: <html:textarea property="profile" rows="10" cols="50"/>

<html:errors property="profile" /><br>

 

<html:submit/>

<html:javascript formName="AddUserForm"/>

</html:form>

 

 

Configuration of struts-config.xml:

 

Using DynaValidatorForm, we define the form bean fields:

 

<form-beans>

<form-bean name="AddUserForm" type="org.apache.struts.validator.DynaValidatorForm">

<form-property name="name" type="java.lang.String" />

<form-property name="address" type="java.lang.String" />

<form-property name="city" type="java.lang.String" />

<form-property name="state" type="java.lang.String" />

<form-property name="postalCode" type="java.lang.String" size="6" />

<form-property name="profile" type="java.lang.String" />

</form-bean>

 

 

<!-- =============== Message Resources Definitions -============ -->

 

<message-resources null="false" parameter="MessageResources" />

 

The string MessageResources means it will look for files beginning with names MessageResources.properties. The name MessageResources.properties is for default locale, and file MessageResources_xx_yy.properties will be used for other locales, where xx refers to language code, and yy is to specify country specific version for same language.

 

 

Additions to MessageResources.properties

# ------User Module-----

AddUserForm.name=Name

AddUserForm.address=Address

AddUserForm.city=City

AddUserForm.state=State

AddUserForm.postalCode=Postal Code

AddUserForm.profile=Profile

 

Additions to Validation.xml:

This file (along with validation-rules.xml) is referred to in struts-config.xml:

 

Struts-config.xml:

<!-- =================== Validator plugin============== -->

 

<plug-in className="org.apache.struts.validator.ValidatorPlugIn">

<set-property property="pathnames" value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml" />

</plug-in>

 

Validator-rules.xml:

The validation rules are already defined in this file, including for javascript code. Unless we want to change the default rules, or add to them, there is no need to modify them.

 

Validation.xml:

Postal code is re-defined to be of 6 digits below:

 

<global>

<constant>

<constant-name>postalCode</constant-name>

<constant-value>^\d{6}\d*$</constant-value>

</constant>

 

 

In <formset>, add validation for AddUserForm:

 

<form name="AddUserForm">

<field

property="name" depends="required">

<arg0 key="AddUserForm.name"/>

</field>

<field

property="address" depends="required">

<arg0 key="AddUserForm.address"/>

</field>

<field

property="city" depends="required">

<arg0 key="AddUserForm.city"/>

</field>

<field

property="state" depends="required">

<arg0 key="AddUserForm.state"/>

</field>

<field

property="postalCode" depends="required,mask">

<arg0 key="AddUserForm.postalCode"/>

<var>

<var-name>mask</var-name>

<var-value>${postalCode}</var-value>

</var>

</field>

<field

property="profile" depends="required">

<arg0 key="AddUserForm.profile"/>

</field>

</form>

</formset>

 

 

Above, all fields are being checked for presence in submitted form. Postal code has additional check for mask against global constant postalCode.

 

The arg0 key refers to MessageResources.properties. If these do not exist in MessageResources.properties, javascript alert with following example messages may be the shown:

 

???en_US.AddUserForm.state??? is required.

???en_US.AddUserForm.postalCode??? is required.

 

It happens because it is not able to find the keys for AddUserForm.state, AddUserForm.postalCode, inside MessageResources.properties. So it prints some confusing output.

 

Validation Output:

 

When user submits form, the fields are checked in javascript, and as per validation rules above, error messages are output in javascript alert. Also, the first field in error gets the cursor focus for correction to be done.

 

e.g. if state and postal code in the form are missed out, alert is displayed with following message:

 

State is required.

Postal Code is required.

 

 

If all fields are provided but postal code is in incorrect format (5 digits instead of 6), alert is displayed with following message:

 

Postal Code is invalid.

 

 

 

Internationalization of validation messages

 

Providing the validation error messages in different langauges is easier using struts, since the appropriate MessageResources_xx_yy.properties file is picked up based on locale.