Java tips for coders, by coders

Form validation is an integral part of any web application. While most developers rely on client side validations, the good ones always perform server side validations as well before accepting any data. You never know what kind of a malicious attack/vulnerability might be exposed if you don’t validate all data. Submitting, validating and then returning to the form again (if errors exist) is the normal flow but we can assist the user further by validating his data immediately. This form of validating user data is in no way supposed to substitute server side validation but only supposed to help the user and make your interface a little more snazzy.

I’m a fan of spring framework and DWR. I have written about integrating the two and about a simple dynamic dropdown using dwr and spring. I’m going to use the two to validate a very simple form which accepts the user’s name and his email address.

The FormValidator.java :

package com.codercorp.dwr;

import org.apache.commons.validator.EmailValidator;

public class FormValidator {

	public boolean validateUsername(String userName) {
		// some database logic
		if (userName.length() > 10) {
			return false;
		}
		return true;
	}

	public boolean validateEmailAddress(String email) {
		EmailValidator validator = EmailValidator.getInstance();
		return validator.isValid(email);
	}
}

There’s no real logic in the validator but you could autowire your DAO here and then have it check the database and see if the username is taken. For validating email address we use commons validator framework.

We need to expose our FormValidator bean through DWR. For this, we must add extra configuration while defining the bean in our applicationContext.xml :

<bean id="formValidator" class="com.codercorp.dwr.FormValidator">
	<dwr:remote javascript="FormValidator">
		<dwr:include method="validateUsername" />
		<dwr:include method="validateEmailAddress" />
	</dwr:remote>
</bean>

Start your server and go to /YOURAPP/dwr/. If FormValidator isn’t listed there then something isn’t right and you probably have a mistake in your configuration, recheck it and then try again.

If everything works, we then move onto the JSP.
Import DWR relate files first :

<script type='text/javascript'
	src='/dwr-example/dwr/interface/FormValidator.js'></script>
<script type='text/javascript' src='/dwr-example/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr-example/dwr/util.js'></script>

Define the form and fields :

Your name :
<input type="text" size="20" id="name" name="name"
	onchange="valueChanged(this.id);" />
<img src="" id="name_img" />
<br /><br />
Your email :
<input type="text" size="20" id="email" name="email"
	onchange="valueChanged(this.id);" />
<img src="" id="email_img" />

We keep two empty images next to each field to update their url’s to the appropriate image at runtime. (The images are and )

Next the javascript function valueChanged() :

function valueChanged(id) {
	var callback = function(res) {
		var img_name = id + '_img';
		if (res == true) {
			dwr.util.byId(img_name).src = 'images/s_okay.png';
		} else {
			dwr.util.byId(img_name).src = 'images/s_error.png';
		}
	};
	if (id == 'name') {
		var value = dwr.util.getValue(id);
		FormValidator.validateUsername(value, callback);
	} else if (id == 'email') {
		var value = dwr.util.getValue(id);
		FormValidator.validateEmailAddress(value, callback);
	}
}

callback is a function which does all the real work. Depending on the element which is modified it changes the image of that element to a particular URL.

That’s it. Launch your server, enter your name in the name field and then click on the next field. If your name is longer than 10 characters then an image with a cross will display. Same is true for your email address. Happy validating!

No related posts.

Tags: Ajax, dwr, Java, Spring

This entry was posted on Tuesday, February 10th, 2009 at 4:43 pm and is filed under Ajax, Spring. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.