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 :


  1. The issue I have is with onsubmit return false. It will validate correctly and send an email, however, the form fields are not submitted and are not included in the sent email

  2. Are you giving correct name attribute to the input tags?