AJAX validation with Spring without changing any java-code

Jeroen van Wilgenburg

One of the nice things of the Struts framework was the
client and server side validation. New frameworks like Spring and JSF have no
client side validation (yet). I read some things about commons validator (the
one used in Struts) in combination with Spring. But we reached the ajax-era, so
the javascript alert boxes should be used for debugging only.

This article will explain how to create a plain old Spring
validator and changing that validator to an ajax-validator without changing
much code.

Setting up normal
validation in Spring

I assume you have some basic knowledge of the Spring web-mvc
framework, when you don’t have this basic knowledge please read this article I published earlier.

Set up a Spring
project in your favorite IDE.

The first step is our data-model. It’s a very sophisticated
personal information manager:

Create a simple bean with getters and setters for name and
city (nl.amis.Contact)

The next step is a SimpleFormController. Let’s call it
ContactFormController. Create the class, extend SimpleFormController and do not
override any methods (it’s not necessary for our example).

Now create a class ContactValidator and implement the
interface Validator:

package
nl.amis;

import
org.springframework.validation.Errors;

import
org.springframework.validation.Validator;

public
class ContactValidator implements Validator {

public boolean supports(Class clazz) {

return clazz.equals(Contact.class);

}

public void validate(Object command, Errors
errors) {

Contact contact = (Contact) command;

if
(contact.getName().equals("")) {

errors.rejectValue("name",
"invalid.name", "Name is a required field");

}

if
(contact.getCity().equals("")) {

errors.rejectValue("city", "invalid.city",
"City is a required field");

}

The mehod supports tells us the validator can validate
objects of the class Contact (we use clazz instead of class because class is a
reserved word). The actual validator is implemented in the method validate. We
do some simple validation on both fields, they must not be empty. The first
argument of errors.rejectValue is the field name, the second the message key
and the last the default error message
(when no key is found).

And now the inevitable xml to wire all the components
togheter:

<?xml
version="1.0"
encoding="UTF-8"?>

<!DOCTYPE
beans PUBLIC "-//SPRING//DTD
BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>

<bean
name="/contact.form"

class="nl.amis.ContactFormController">

</property>

</bean>

<bean
id="jspViewResolver"

class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<property
name="viewClass"

value="org.springframework.web.servlet.view.JstlView"
/>

</bean>

</beans>

Nothing specials happens here, we only added the validator
property to the bean we already knew. Now we have to create form.jsp and
success.jsp and place them in WEB-INF\jsp

Create your own success.jsp and use the following code for
form.jsp:

<%@
taglib prefix="spring"
uri="http://www.springframework.org/tags"%>

<%@
taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%>

<html>

<body>

<spring:bind
path="command.name">

name: <input
type="text" name="${status.expression}"
value="${status.value}" />

<c:out
value="${status.errorMessage}"/><br/>

</spring:bind>

<spring:bind
path="command.city">

city: <input
type="text" name="${status.expression}"
value="${status.value}" />

<c:out
value="${status.errorMessage}"/><br/>

</spring:bind>

</body>

</html>

It’s
just a html form with fields for name and city. The input tags are surrounded
by <spring:bind/> tags. These tags bind the values to the variables of
the command object (the default name for command is command, you can change
this name by setting the commandName property in your SimpleFormController
bean)

The
form.jsp is also used when there are validation errors, these errors are
printed at the location of status.errorMessage and the corresponding field.

Compile
your application, deploy it and visit contact.form (I used the url pattern
*.form for the Spring servlet mapping). Your page should display the following
form:

Now
click the validate button (because we want an invalid form) and the validation
errors appear next to the fields:

Creating AJAX validation

To
create AJAX
validation we have to remove the <spring:bind/> tags from our form and save it in the root
directory of your project (usually something like webapp)

<tr>

</tr>

<tr>

</tr>

</table>

</form>

I also added a table and a stylesheet to
the form to make it look less crappy. You probably also noticed the id
attributes at the input tags and the new div’s with an id attribute that ends
with Error. The div’s are to display the error messages. The id attribute at
the input tags are needed because I want to use document.getElementById. It is
possible to iterate through all the form fields with JavaScript and the div’s
could also be removed, but this makes it a lot easier to explain.

In the head part of your html add the following code:

function postForm(){

var formString="name="+
document.getElementById(‘name’).value
+"&city=" + document.getElementById(‘city’).value;

document.getElementById(‘nameError’).innerHTML="";

document.getElementById(‘cityError’).innerHTML="";

loadXMLDoc("contact.form",formString);

}

</script>

The xhr.js is a file to make the XMLHttpRequest and can be
downloaded here. Because Spring expects forms to be posted we have to put
the form in a String (this is where document.getElementById is very handy)

After this we clear the error messages (it is possible that
the users submits the form for the second time and fixed some error).

loadXMLDoc makes the actual XMLHttpRequest.

The xhr.js is the same file that’s always used in all the AJAX getting started
guides with some minor adaptions. I
changed the method signature of loadXMLDoc, I added the form variable. This is the part that is added to post the
form:

req.open("POST",
url, true);

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

req.send(form);

And the callback executes the response as javascript (with eval(req.responseText);). This
is a bit tricky and it is probably better and safer when you make a system
where no eval is needed, but it’s an example and reduces the amount of code
needed to explain everything to you.

Don’t forget to copy success.jsp to your root directory
because we can’t use the old one anymore.

Create a new form.jsp in your WEB-INF/jsp directory:

<%@
taglib prefix="spring"
uri="http://www.springframework.org/tags"%>

<%@
taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core"%>

<spring:bind
path="command.name">

<c:if
test="${not
empty status.errorMessage}">

document.getElementById(‘${status.expression}Error’).innerHTML=’<img
align="absmiddle"
src="img/arrow2.png"> <c:out
value="${status.errorMessage}"
/>‘;

</c:if>

</spring:bind>

<spring:bind
path="command.city">

<c:if
test="${not
empty status.errorMessage}">

document.getElementById(‘${status.expression}Error’).innerHTML=’<img
align="absmiddle"
src="img/arrow2.png"> <c:out
value="${status.errorMessage}"
/>‘;

</c:if>

</spring:bind>

We have to use the bind tags again, because we need the
error message inside these tags. With an if statement we check if there exist
an errorMessage. If there is an error message the validation of the
corresponding field failed and we have to display an error message inside the
div. If there is no error message no javascript will be generated. If there is
no error message at all the success.jsp is loaded. You also see an <img>
tag inside the javascript, the image can be downloaded here.

So far everything is pretty clean and no strange tricks are
needed. Except for success.jsp unfortunately, we have to hardcode an url inside
the javascript:

document.location.href="success.jsp";

This line of javascript loads the old success page as if
nothing happened with AJAX
validation.

No deploy your application again and visit form.jsp (NOT
contact.form!) and hit the validate button:

When you type some characters in one of the fields and hit
validate again one red arrow should
disappear.

Conclusion

I think this is a really nice way to have AJAX validation in your Spring forms. It
might even be better than the normal spring validation because you don’t need
the <spring:bind> tags in your forms anymore and with some effort you
don’t need the div’s for the errors and the id attributes in the form fields.

Another remark is that you hardcoded the url for the
succesView in your page. You can work around this issue by creating something
like a finalView as variable in your bean and use it in the success javascript.

This diagram summarizes what happened. I moved all the
action to the background where it is invisible for the user. On top of that we
created two new pages with some javascript in it.

AJAX validation with Spring without changing any java-code

Setting up normal
validation in Spring

Upcoming Events

AMIS Tweets

AJAX validation with Spring without changing any java-code

Setting up normal validation in Spring

Upcoming Events

User Login

AMIS Tweets

Setting up normal
validation in Spring