Live Validation 2.0
Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
What it Does
Use this plug-in to add live validation to any form on your page. The plug-in indicates whether a form control is valid or not by switching between any icons of you choosing as the user types.
How to Use
jQuery(document.body).liveValidation();
Run the plug-in on a parent-element of the form-controls you want to affect. If you run it on document.body every form-control in the document will get live validation.
Example
Example Code
HTML
<div id="jquery-live-validation-example">
<form method="post" action="">
<p>
<label>
Name<br />
<input type="text" name="name" />
</label>
</p>
<p>
<label>
Email<br />
<input type="text" name="email" />
</label>
</p>
<p>
<label>
Foo<br />
<input type="text" name="foo" />
</label>
</p>
<p>
<label>
Bar<br />
<input type="text" name="bar" />
</label>
</p>
<p><input type="submit" value="Ok" /></p>
</form>
</div>
JS
jQuery('#jquery-live-validation-example').liveValidation({
validIco: WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-valid.png',
invalidIco: WEBROOT + 'aFramework/Modules/Base/gfx/jquery.liveValidation-invalid.png',
required: ['name', 'email', 'foo'],
fields: {foo: /^S.*$/}
});
Source Code
jQuery.fn.liveValidation = function (conf, addedFields) {
var config = jQuery.extend({
validIco: '', // src to valid icon
invalidIco: '', // src to invalid ico
valid: 'Valid', // alt for valid icon
invalid: 'Invalid', // alt for invalid icon
validClass: 'valid', // valid class
invalidClass: 'invalid', // invalid class
required: [], // json/array of required fields
optional: [], // json/array of optional fields
fields: {} // json of fields and regexps
}, conf);
var fields = jQuery.extend({
name: /^S.*$/, // name (at least one character)
content: /^S.*$/m, // "content" (at least one character)
dimensions: /^d+xd+$/, // dimensions (DIGITxDIGIT)
price: /^d+$/, // price (at least one digit)
url: /(ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!\-\/]))?/, // url
email: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/ // email
}, config.fields);
fields.website = fields.url;
fields.title = fields.author = fields.name;
fields.message = fields.comment = fields.description = fields.content;
var formControls = jQuery.merge(config.required, config.optional);
if (!formControls.length) {
return this;
}
for (var i in formControls) {
formControls[i] = ':input[name="' + formControls[i] + '"]:not([disabled])';
}
formControls = formControls.join(',');
return this.each(function () {
jQuery(formControls, this).each(function () {
var t = jQuery(this);
var isOptional = false;
var fieldName = t.attr('name');
for (var i in config.optional) {
if (fieldName == config.optional[i]) {
isOptional = true;
break;
}
}
if (t.is('.jquery-live-validation-on')) {
return;
}
else {
t.addClass('jquery-live-validation-on');
}
// Add (in)valid icon
var imageType = isOptional ? 'valid' : 'invalid';
var validator = jQuery('<img src="' + config[imageType + 'Ico'] + '" alt="' + config[imageType] + '" />').insertAfter(t.addClass(config[imageType + 'Class']));
// This function is run now and on key up
var validate = function () {
var key = t.attr('name');
var val = t.val();
var tit = t.attr('title');
// If value and title are the same it is assumed formHints is used
// set value to empty so validation isn't done on the hint
val = tit == val ? '' : val;
// Make sure the value matches
if ((isOptional && val == '') || val.match(fields[key])) {
// If it's not already valid
if (validator.attr('alt') != config.valid) {
validator.attr('src', config.validIco);
validator.attr('alt', config.valid);
t.removeClass(config.invalidClass).addClass(config.validClass);
}
}
// It didn't validate
else {
// If it's not already invalid
if (validator.attr('alt') != config.invalid) {
validator.attr('src', config.invalidIco);
validator.attr('alt', config.invalid);
t.removeClass(config.validClass).addClass(config.invalidClass);
}
}
};
validate();
t.keyup(validate);
});
// If form contains any invalid icon on submission, return false
jQuery('form', this).submit(function () {
return !jQuery(this).find('img[alt="' + config.invalid + '"]').length;
});
});
};
Download
Plug-in
- jquery.liveValidation.js (4.72 kb Unpacked) (Minified)
- jquery.liveValidation-valid.png

- jquery.liveValidation-invalid.png

Requires
Random jQuery Plug-ins
Favicons
This little plug-in will insert favicons to all external links found on your site. The plug-in scans the URL the link is pointing to for a favicon and...
Colour Picker
Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...
Captcha Refresh
If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...