Nov 20, 2012

jQuery Form Validation Plugin

If you are developing websites then you will come across Form validation. I too and I was using jQuery Validation plugin. This is an awesome plugin but really buggy in IE7/8 browser with different jQuery versions. Its not stable and the developer of this plugin is not looking after the bugs. I reported several times but no response. So finally I decided to make my own validation plugin.

Before I start further let me tell you that currently this plugin only validates INPUT types with number, email and blank value fields. Its still in beta or under development mode.



I ll explain you the usage of this plugin by a simple form example


<form method="post" class="form-horizontal" id="loginForm" onsubmit="return false;">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" name="user" placeholder="Email" class="required email">
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" name="password" class="required" placeholder="Password">
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
<button id="submit" type="submit" class="btn" onclick="javascript:ajaxThrow('#loginForm','#response');">Sign in</button>

<div class="alert alert-info" id="response"></div>

To make a field mandatory, you need to add a class required.
Currently on input types will be accepted so to make if mandatory, use the following attributes :

class Output
class="required email" This will check for blank field and whether the value is EMAIL ID
class="required number" This will check for blank field and whether the value is a NUMBER
class="required" This field will check for blank values

So now the final is the jQuery:


jQuery(function($) {
$(document).ready(function() {

$('#submit').click(function() {
val = $('#loginForm :input').validateForm();
if (val) {
var qstring = $('#loginForm').serialize();
$('#response').fadeIn().html('Form Validated successfully with following fields<br>' + qstring);


To validate the form, you ll just need to add a line :
val = $('#loginForm :input').validateForm();

This will return a boolean value. And will also add a class error to the respective input field.

Check this in action here :