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
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:
- add a class of
validateto the form element.
- add a class of
requiredto the inputs.
- add a class of
min-val_3to 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.
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.
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:
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.
form_id with the id of the form you are validating. The
validate variable will be true if the form is valid, false otherwise.
Bringing it home
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.