Client Side Validation

Validation is a very important aspect of any web application.We can validate user input in client side as well as server side. Client side validation is important since we dont want to send data to server and thenlet user know about the errors. But we can not rely only on client side validation since if Javascript is disabled on client side it will lead to invalid data on server.
So mix approach should be followed: validating data on server as well as client side.

I am using Spring Framework and Spring MVC, I have few options available:

  1. AJAX based validation
  2. Spring VLANG Validation
  3. Apache commons validation (Struts Validator Framework)

I have dropped idea of AJAX based validation since it will require to more Remote calls
Spring VLANG Validation is a good option but dependency is JDK 1.5 and we are still running on JDK 1.4.

Finally decided to go for Commons validator this is well proven and stable one.
I have also read blog from Matt where he appreciated commons validator.
I have used custom validation along with commons standard validation.

Steps followed by me to get commons validator configured with Spring are as follows:
1. Spring-commons-validator (Spring modules 0.8)
2. Commons validator

Step 1: Downloaded dependency jar files
Step 2: Added validation.xml, validation-rules.xml, validation-custom-rules.xml (For custom validators)
Step 3: Added validation specific entries to applicationContext-validation.xml
step 4: Added validator property to form controller entry in [context-root]-servlet.xml

My Validation.xml is as follows:


<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE form-validation PUBLIC "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1//EN" ";
<form name="registerFormBean">
<field property="user.fname" depends="mask,maxlength">
<arg0 key="register.label.firstname"/>
<arg1 name="maxlength" key="${var:maxlength}" resource="false"/> <var><var-name>maxlength</var-name><var-value>5</var-value>
</var> <var> <var-name>mask</var-name> <var-value>^[a-zA-Z]*$</var-value> </var>
</field> <field property="" depends="required,email">
<arg0 key=""/>
</field> <
field property="user.password" depends="required,twofields">
<arg0 key="register.label.password" />
<arg1 key="register.label.verifypassword"/>
<var> <var-name>secondProperty</var-name>
</var> </field> <
field property="verifyPasswd" depends="required">
<arg0 key="register.label.verifypassword" />
<field property="user.location" depends="selectfield">
<arg0 key="register.label.location" />
<arg1 key="${var:maxsize}" name="selectfield" resource="false"/>


My custom validation rules file is as follows:

<!DOCTYPE form-validation PUBLIC "-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.3.0//EN" "; <form-validation>

<validator name="twofields" classname="" method="validateTwoFields"





depends="required" msg="errors.twofields">


[CDATA[ function validateTwoFields(form) {

var bValid = true;

var focusField = null;

var i = 0;

var fields = new Array();

oTwoFields = new twofields();

for (x in oTwoFields) {

var field = form[oTwoFields[x][0]];

var secondField = form[oTwoFields[x][2]("secondProperty")];

if (field.type == 'text' field.type == 'textarea' field.type == 'select-one' field.type == 'radio' field.type == 'password') {

var value; var secondValue;

// get field's value

if (field.type == "select-one") { var si = field.selectedIndex; value = field.options[si].value; secondValue = secondField.options[si].value; } else { value = field.value; secondValue = secondField.value; } if (value != secondValue) { if (i == 0) { focusField = field; } fields[i++] = oTwoFields[x][1]; bValid = false; } } } if (fields.length > 0) { focusField.focus(); alert(fields.join('\n')); } return bValid; }]]> </javascript> </validator> <validator name="selectfield" classname="" method="validateSelectField" methodParams="java.lang.Object, org.apache.commons.validator.ValidatorAction, org.apache.commons.validator.Field, org.springframework.validation.Errors" depends="" msg="errors.multiselect"> <javascript><![CDATA[ function validateSelectField(form) { var bValid = true; var focusField = null; var i = 0; var fields = new Array(); oSelectFields = new selectfield(); for (x in oSelectFields) { var field = form[oSelectFields[x][0]]; if (field.type == 'select-multiple') { var iMax = parseInt(oSelectFields[x][2]("maxsize"));
if ((field.options.length == 0) (field.options.length > iMax)) { if (i == 0) { focusField = field; } fields[i++] = oSelectFields[x][1]; bValid = false; } } } if (fields.length > 0) { focusField.focus(); alert(fields.join('\n')); } return bValid; }]]> </javascript> </validator> </global>