Monday, August 30, 2010

GroovyMag Plugin Corner: JavaScript Validation Plugin

The following post is a reprint of the Plugin Corner article for the April 2009 issue of GroovyMag. You can find this and other past issues at http://groovymag.com.

Grails provides powerful and easy-to-use constraint validation. With a few short lines in a simple DSL, you can ensure that required fields are filled in or that numeric field values are within a specified range. If you take advantage of Grails’ scaffolding, error reporting is also handled for you. The only catch is that it’s server-side only. If you want this type of validation without a round-trip to the server, you’re on your own — unless you use Peter Delahunty’s brand new JavaScript Validation plugin.

Peter released the Javascript Validation plugin earlier in March and then went right to work improving it. At the time of this writing it is at version 0.7 and is working quite well. Let’s see how easy it can be adding client side validation to our Grails applications. We’ll start by installing the plugin:

> grails install-plugin javascript-validation

We’ll need to make a couple changes to the views that we want validation on, but first let’s look at the domain class that we’ll be working with.


class Book {
String title
String author
Integer pages
static constraints = {
title(blank:false)
author(blank:false)
pages(range:10..1000)
}
}


This simple Book class (bet you never saw that in an article before) has three constraints. We will use the JavaScript Validation plugin to check those constraints without a trip to the server.

Open grails-app/views/book/create.gsp and take a look at the <g:form> declaration. It should look something like this:


<g:form action=”save” method=”post” >


The Validation plugin requires that our form contain a name attribute and an onSubmit attribute that calls the validateForm JavaScript function. So, let’s modify our form declaration to look more like this:


<g:form name=”bookCreate”

onsubmit=”return validateForm(this);”

action=”save” method=”post” >


Finally, we need to add the following line to the <head> section of our page:


<jv:generateValidation domain=”book” form=”bookCreate”/>


Here we’re just using the minimum required attributes for the <jv:generateValidation> tag. The domain attribute takes the domain class name, but with the first letter lowercase. The form attribute takes the same value that we assigned to the name attribute of our <g:form> tag. That’s all it takes to start using this plugin.

Now if we go to create a new Book and leave out the author’s name for some dumb reason, we’ll see something like the screenshot in Figure 1.



Not bad for a couple lines of code. That’s just the basics. The <jv:generateValidation> tag has ten more attributes that we can use to add more vigor and vim to our validations.

There is support for both domain classes and command objects. Errors can be displayed in a JavaScript alert (as shown in Figure 1), which is the default, or they can be shown in a list placed in a page element of our choosing, or we can even create custom error handling.

Currently only the following constraints are supported by the plugin:

  • blank

  • nullable

  • email

  • creditCard

  • matches

  • range


This list is considerably shorter than the list of constraints that Grails provides, but as we can see by the 6 updates since its creation a few weeks ago, this plugin is being actively enhanced, so I wouldn’t be surprised to see more constraints supported soon.

Oh, and lest I forget, the Javascript Validation plugin works with Grails internationalization. So with a minor tweak to our messages.properties file, we can customize our error messages as shown in Figure 2.



This plugin has great potential. It will already save significant development time in setting up client-side validation, and I’m sure it’s going to keep getting better. Stop by the Grails Plugin Portal and check it out. You can leave a comment with enhancement suggestions, or, if you’ve tried it out, let others know what you think with a rating. I’m giving it 5 stars!

Resources



Grails Plugin Portal page:
http://grails.org/plugin/javascript-validator

Peter Delahunty’s Blog:
http://blog.peterdelahunty.com