Struts 1.2 JavaScript Validation using Validator framework example code

Struts 1.2 or 1.3 validator framework provides easy way for server side form data validations. Similarly it also provides very easy to use mechanism to perform client side validations. JavaScript code to validate form data is defined in the validation-xml file (if required ) along with server side validation code. If the client side validation is enabled, the validator framework generates JavaScript code for your application, and run on browser to perform the same validations that take place on the server side. If any validation fails, a message dialog box  appears which displays validation failure message ( field name with type of validation that failed). Validator framework is having lots of pre-defined server side and client side validation rules such as required for mandatory field validation, minlength to check the length of input data should not be less than a specified minimum length, maxlength for validating input data doesn’t exceed a specified maximum length, date to check the given date string is a valid date in the specified date format using java.text.SimpleDateFormat class and etc …

Now how to enable the client-side validation for any JSP ? very simple. Just place javascript tag with attribute formName= “actionform” in JSP as given below

<html:javascript formName=”empForm”/>, where empForm is the name of the action form to specify the name mentioned in validation.xml for the element <form>

Let us assume that JSP (empForm) has five input fields empCode, empName, dob, email, mobileNo. Suppose the validations required for the empForm are

1. empCode , empName , dob are mandatory fields

2. the minimum length of empCode is 4

3. dob should be a valid date in the format “dd/MM/yyyy”

the validations for the above fields for the empForm are defined in the validation.xml as given below.


<form-validation>
<form-validation>
<formset>
<form name="empForm">
<field property="empCode" depends="required, minlength">
<arg0 key="label.empCode" />
<arg1 key="${var:minlength}" resource="false"/>
<var>
<var-name>minlength</var-name>
<var-value>4</var-value>
</var>
</field>
<field property="empName" depends="required">
<arg0 key="label.empName" />
</field>
<field property="dob" depends="required, date">
<arg0 key="label.dob"/>
<var>
<var-name>datePattern</var-name>
<var-value>dd/MM/yyyy</var-value>
</var>
</field>
</form>
</formset>
</form-validation> 

The following messages are added in the ApplicationResources.properties


label.empCode=Employee Code
label.empName=Employee Name
label.dob=Date of Birth
errors.minlength={0} can not be less than {1} characters.
errors.date={0} is not a valid date.
........
...........

and in struts-config.xml, add the below line

<message-resources parameter=”props.ApplicationResources”/>

where props is a folder inside JavaSources

The JSP code for the empForm is


......
.......
<body>
<html:errors />
<html:javascript formName="empForm"/>
<html:form action="/empEnty" onsubmit="return validateEmpForm(this);">
<bean:message key="label.empCode" />
<html:text property="empCode"></html:text> <br />
<bean:message key="label.empName" />
<html:text property="empName"></html:text> <br />
<bean:message key="label.dob" />
<html:text property="dob"></html:text> <br />
<bean:message key="label.email" />
<html:text property="email"></html:text> <br />
<bean:message key="label.mobile" />
<html:text property="mobile"></html:text> <br />
<html:submit value="Submit"></html:submit>
</html:form>
</body>
.......
..........

The following Javascript methods are generated for validating required, minlength, email, date validations when using javascript tag in the JSP

validateRequired(form)

validateMinlength(form)

validateEmail(form)

validatDate(form)

and one more master javascript method is automatically generated to call the above validation methods as given below


var bCancel = false;
function validateEmpForm(form) {
if (bCancel)
return true;
else
return validateRequired(form) && validateMinLength(form) && validateDate(form) && validateEmail(form);
}

The name of the master validation method will be concatenation of  “validate” and the name of the actionForm (here empName). So master method for our example will be validateEmpForm as given above.

Next step is to call the above master method by adding onsubmit event handler for the empForm as given below

<html:form action=”/empEnty” onsubmit=”return validateEmpForm(this);”>

If your struts validator displays error dialog window immediately, when a particular validation fails. Do you want the clientside Javascript validation to check all fields, instead of stopping at the first error?. This can be done by setting a new property, stopOnFirstError, on the Validator PlugIn to false as given below. This feature works since Struts 1.2.0

 


<plug-in className="org.apache.struts.validator.ValidatorPlugIn">
<set-property property="pathnames"
value="/WEB-INF/validation.xml,/WEB-INF/validator-rules.xml"/>
<set-property property="stopOnFirstError" value="false"/>
</plug-in>

Some of the output screens when run the above application

For server side validation using struts validator from work, you can visit my another post Struts validator Framework

You may also like

Leave a Reply