Validating with Validatious: A Quick Tutorial
published Aug 03, 2010
I had a need for some client side validation for a project, so I looked into a few validation plugins. We’re using JQuery on the project (of course!), so I looked into the standard jquery validation plugins (jquery.validate looked nice, and so did jQuery Validation).
In the end, though, I ended up going with the totally unobtrusive Validatious.
I’m totally happy with my choice, but I ran into a gotchas and figured out a few things that I thought I should mention.
First, though, a quick overview of Validatious.
A quick intro to Validatious
Validatious has two different APIs: a Javascript DSL and an HTML extension. I used the HTML extension.
To use it, you load the script with a standard script tag
Then, you add some class names to elements. For example, to validate a form that looks like this:
You need to add a class of validate
to the form element, and a validation class to each of the form elements that you want to validate. Validation classes are things like required
(this element is required) or min-val_3
(this element has a minimum value of 3). Your final file might look something like this:
All I’ve done is:
- include the javascript.
- add a class of
validate
to the form element. - add a class of
required
to the inputs. - add a class of
min-val_3
to the final input (I want a donation of at least $3 or it’s not worth my time!). - add a title to the donation input to set a custom validation error.
Notice what I didn’t do: write any Javascript. I like that :).
You can see the form in action. Note that you have to click on submit to see the validation. Also note that the form and the validation errors are really ugly . We’ll fix all of that before the end of this.
There’s lots more you can do here. A reasonable place to start learning is on the Validatious features page, which contains a bunch of mini tutorials to get you started.
The Gotcha
I mentioned a gotcha. The problem, which almost made me give up on this plugin right away, is that
if you try to validate a form element with no name or id, it blows up with a cryptic error message like this:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
If you see this, go through and make sure that all of your form elements have ids and names.
Validating on blur
In the original demo, you had to click the submit button to see the validations. There’s been some research done that shows that validating on blur (just after the user has entered the value into the input box) is more effective. Luckily, that’s easy enough to do. Just add a script like this to your form:
Putting validations closer to the input field
One thing I didn’t like was that the validation errors were all getting piled up on the top of the form. It turns out that Validatious inserts the errors at the beginning of the parent of the input element that has an error. So, the fix is to wrap all of your input elements in a div
tag. Not perfect, I know, but it’s reasonable if you give it a class name like formset
and use it to hook some CSS in as well.
That’s semantic, right? It works, and that’s semantic enough for me. Don’t tell the standardistas.
Here’s what that looks like:
Validating via Javascript
As per usual, I wanted to do something a little different with my form. It was a very complex form, and I needed to do a few things before submitting. So, I needed to intercept the click on the submit button. Also, I wanted to style the button as an image with hover and active states, which is easier to do with an anchor tag than an submit input.
This all meant that I needed to trigger the validations from Javascript. You do this with a Javascript line like this:
replacing form_id
with the id of the form you are validating. The validate
variable will be true if the form is valid, false otherwise.
In the end, that’s all of the JavaScript I had to use. Everything else was as simple as adding a class to the form and then to all of the form elements I wanted to validate. I’m definitely using Validatious next time I need some client side validation.
Bringing it home
Here’s a final version of the form, with the formset divs, validation on blur, validating via Javascript and even a bit of styling:
You can see it in action here.
If you’re interested, go check Validatious out.
Update: I’ve also written a post on writing custom validators with Validatious.