Simple client-side form validation in javascript using jQuery

April 15, 2008 § Leave a comment

I’m new to jQuery (I come from a prototype background), so I quite enjoyed my first little jaunt using jQuery… and I used it to create a simple client-side form validation library.

As we are generating a lot of our forms server side which in turn can be rendered into several different formats, so it’s important for us to have a simple way to attach validation to form elements.

For this method to work, each form element needs to be wrapped up in a container, a li is used in this example. Each container then has a class applied to it to indicate the type of validation required for the form field contained by the wrapper. Here’s the HTML snippet:

Now all that needs to be done is a validation function bound to each input field, that’s easy because each input field is wrapped in a container with the “validation” class. The second class is the type of validation that is required for the input field. To keep it generic, you can just eval the class name as long as there is a function to match, heres the javascript:

init: function() {
    $('li.validation').find(":input").each(function() {
        var validations = $(this).parent().get(0).className.split(' ');
        for (var i=0; i<validations.length; i++) {
            vtype = validations[i];
            if (vtype != 'validation' ) {
                $(this).bind("blur", {element: this}, eval(vtype));
required: function(o) {
    var element =;
    // do some validation with element.value
date: function(o) {
    var element =;
    // do some validation with element.value

The validation functions can then do whatever you want. I generate a boolean result and an error message (if necessary) and pass these parameters to a generic function which indicates the problem with the field, but equally as important may be to disable the submit button etc.

To stop any nasty conflicts, I’d recommend wrapping that all up in a namespace or similar. Other points worth nothing: this setup validates everything on a blur event (which might be a bit annoying). Also, there is no way of passing any parameters to the validation functions; so special cases need their own validation functions. However, I can’t imagine there will ever be that many different types of validation for it to matter too much.


Tagged: , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading Simple client-side form validation in javascript using jQuery at Fringley's Blog.


%d bloggers like this: