--- layout: post title: "Validating with Validatious: A Quick Tutorial" --- 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](http://plugins.jquery.com/project/jqueryvalidate) looked nice, and so did [jQuery Validation](http://plugins.jquery.com/project/validate)). In the end, though, I ended up going with the totally unobtrusive [Validatious](http://validatious.org/). 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](http://validatious.org/learn/features/dsl) and an [HTML extension](http://validatious.org/learn/features/html). I used the HTML extension. To use it, you load the script with a standard script tag {% highlight html %} {% endhighlight %} Then, you add some class names to elements. For example, to validate a form that looks like this: {% highlight html %}
{% endhighlight %} 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: {% highlight html %} Validatious Demo

Validatious Demo




{% endhighlight %} 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](/demos/validatious_form.html). 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](http://validatious.org/learn/features), 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. Go [see it in in-action](/demos/validatious_form_broken.html). ## Validating on blur ## In the original demo, you had to click the submit button to see the validations. There's been [some research done](http://www.alistapart.com/articles/inline-validation-in-web-forms/) 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: {% highlight javascript %} v2.Field.prototype.instant = true; // make the validations happen instantly {% endhighlight %} ## 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: {% highlight html %}



{% endhighlight %} ## 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](http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/), 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: {% highlight javascript %} var validate = v2.Form.forms['form_id'].validate() {% endhighlight %} 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: {% highlight html %} Validatious Demo

Validatious Demo




submit!
{% endhighlight %} You can [see it in action here](/demos/validatious_form_all_singing_all_dancing.html). If you're interested, go [check Validatious out](http://validatious.org/). Update: I've also written a post on [writing custom validators with Validatious](/2010/08/custom-validators-with-validatious.html).