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

<script src="/javascripts/validatious.min.js" type="text/javascript"></script>

Then, you add some class names to elements. For example, to validate a form that looks like this:

<form id='donation_form' action='/donate'>
  <label for='first_name'>First Name</label>
  <input type='text' name='first_name' id='first_name' />
  <label for='last_name'>Last Name</label>
  <input type='text' name='last_name' id='last_name' />
  <label for='amount'>Amount to donate</label>
  <input type='text' name='amount' id='amount' />
</form>

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:

<html>
  <head>
    <title>Validatious Demo</title>
  </head>
  <body>
    <h1>Validatious Demo</h1>

    <form id='donation_form' action='#' class='validate'>
      <label for='first_name'>First Name</label>
      <input type='text' name='first_name' id='first_name' class='required' /><br />
      <label for='last_name'>Last Name</label>
      <input type='text' name='last_name' id='last_name' class='required'/><br />
      <label for='amount'>Amount to donate</label>
      <input type='text' name='amount' id='amount' class='required min-val_3' title='The donation amount must be at least $3'/><br />
      <input type='submit' value='submit!' />
    </form>
    <script src="/demos/javascripts/validatious.min.js" type="text/javascript"></script>
  </body>
</html>

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.

Go see it in in-action.

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:

v2.Field.prototype.instant = true; // make the validations happen instantly

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:

<form id='donation_form' action='#' class='validate'>
  <div class='formset'>
     <label for='first_name'>First Name</label>
     <input type='text' name='first_name' id='first_name' class='required' /><br />
  </div>
  <div class='formset'>
    <label for='last_name'>Last Name</label>
    <input type='text' name='last_name' id='last_name' class='required'/><br />
  </div>
  <div class='formset'>
    <label for='amount'>Amount to donate</label>
    <input type='text' name='amount' id='amount' class='required min-val_3' /><br />
  </div>
  <input type='submit' value='submit!' />
</form>

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:

var validate = v2.Form.forms['form_id'].validate()

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:

<html>
  <head>
    <title>Validatious Demo</title>
    <style type="text/css">
      ul.messages {
        list-style-type: none;
        padding: 0;
        margin: 15px 0 0 0;
      }

      .error ul.messages li {
        color: red;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>Validatious Demo</h1>

    <form id='donation_form' action='#' class='validate'>
      <div class='formset'>
        <label for='first_name'>First Name</label>
        <input type='text' name='first_name' id='first_name' class='required' /><br />
      </div>
      <div class='formset'>
        <label for='last_name'>Last Name</label>
        <input type='text' name='last_name' id='last_name' class='required'/><br />
      </div>
      <div class='formset'>
        <label for='amount'>Amount to donate</label>
        <input type='text' name='amount' id='amount' class='min-val_3' /><br />
      </div>
      <a href='#' id='submitter'>submit!</a>
    </form>
    <script src="/demos/javascripts/validatious.min.js" type="text/javascript"></script>
    <script src="/demos/javascripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      v2.Field.prototype.instant = true; // make the validations happen instantly
      $('#submitter').click(function() {
        var validate = v2.Form.forms['donation_form'].validate()
        // if validate is true then submit via AJAX or something ...
      })
    </script>
  </body>
</html>

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.

blog comments powered by Disqus