kValid jQuery plugin :: Blog

kValid jQuery plugin

JavaScript form validation will never replace the server side validations, but can be really useful and even helpful for the users. I'm not talking just about validation itself, it can be really interactive.

I've started to code interactive validation a while ago for my forms on my pages, but yesterday I realized it can be done much cleaner and easier. I was using 2 JavaScript files you know ? The first one was prototype.js and the second one was implementation of the first one. Prototyping has its negatives though and I wanted to get rid of it for sure. And at this moment, I couldn't think of a better solution, than write a jQuery plugin to do this.

kValid demo

First of all you may want to have a look at kValid demonstration, here is the demo page.

Documentation

If you're interested in implementing my kValid you have to download and unpack the demo file package. There are 2 dirs and the index.html. The css dir doesn't really contain nothing important, there's just some basic styling for texts ... The js dir is important. In this dir, there are:

jquery-1.2.6.pack.js - jQuery library v1.2.6 (packed)
kValid.js - kValid js file (full, not packed)
kValid.pack.js - kValid js file packed

I use the kValid.pack.js (the packed one) as default, but I added a non-packed version too, if someone would like to have a look at it or to edit it...

How kValid works

kValid is applied on jQuery object and returns this jQuery object, thus a pretty standard behavior.

A simple initialization may look like this:

$(function () {
    $('input.required').kValid();
});

With this example all inputs with a required class will be kValidated. After initialization the given inputs (or other elements, explained later) will be kValidated after each keyup event (on these elements of course).

kValid behavior

If a given input has an invalid value - the invalid class (or other specified class - explained later) will be added to this element. Also the elements $.data('valid') value will be set to 0.

If a given input has a valid value - the invalid class (or other specified class - explained later) will be removed from this element. Also the elements $.data('valid') value will be set to 1.

By default - each given element is checked only for being non-empty. To specify checking options you have to set the related elements data with the kValid key. Such data settings may look like this:

$(function () {
    $('input#i1').data('kValid','time|hh:ii');
});

At this moment there are the following filters:

time - validates the time of given format
mail - checks if the e-mail is valid
nr - validates the number
phone - validates the phone number (it's a quite loose filter)
words - validates the words

You can specify the checking settings, I'll explain on example from the demo page:

$(function () {
    $('input#i1').data('kValid','time|hh:ii');
    $('input#i2').data('kValid','time|dd.mm.yyyy hh:ii');
    $('input#i3').data('kValid','mail');
    $('input#i4').data('kValid','nr|true');
    $('input#i5').data('kValid','phone');
    $('input#i6').data('kValid','words|5 4');
});

To specify the checking settings you have to append |settings to the kValid jQuery data value. Not all filters use these settings though. At this point only time,number and words use these settings.

The time filter creates a validation mask from the given settings by replacing any of the chars [ymdhis] with a number. It also checks the number values for months, days, hours, minutes and seconds (hour can't be > 23 etc).

The number filter takes a simple boolean as a parameter - true or false. This parameter represents the spacesAllowed value, so by setting it to true, the numbers containing space characters will be validated as valid.

The words settings should have the format of a spaces separated number values. These number values represents a minimal length of each word.

kValid options

By passing an options object to kValid you can specify the following attributes:

accept - jQuery selector representing filter of elements which you want to kValid. This is a subset of the jQuery object on which the kValid was launched. (Default: 'input:not(:checkbox,:radio)')
invalid_class - class name to be added / removed to / from invalid / valid element :) (Default: 'invalid')

The initialization with fully featured kValid may look like:

$(function () {
    $('input.required').kValid({
        accept: 'input:not(:checkbox,:radio),textarea',
        invalid_class: 'custom_class'
    });
});

Download

You can download the demo file package which contains everything needed. Feel free to use this package and all its parts in any way. You can use it, edit it, reproduce it ...

Compatibility

This plugin was tested successfully with jQuery v1.2.6 and on the following browsers: IE 6, FFX 3+, Opera 9.5+, Chrome 1.0.

Peter Rossa