Form Validation With JQuery and CSS

Registration and Login forms are the essential part of the website. Building a registration form us not a hard development work. But creating a proper validation is not so easy as it looks.

If you are creating a form, you must create it secure and user friendly. Form must help users and tells them what to fill in the field. It must warn users if they try to fill wrong information. Suppose there is a filed for user name, user must input email not anything else.
In this post, i am post i am posting a nice form validation script which i have developed with jQuery and CSS.

Demo Download

HTML Form For Form Validation:

<form id="myform" name="myform" action="index.php" method="post">

<h3>Registration Form</h3>
<!-- BEGIN ERROR -->
<h4 id="err">
<?php echo($err);
?>
</h4>
<!-- END ERROR -->

<div id="inputs">

<!-- email -->
<label for="email">Email</label>
<input id="email" name="email" title="Your valid email ID." /><label id="err1">*</label>
<br />

<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" name="passwd" title="Make it hard to guess." /><label id="err2">*</label>
<br />

<!-- password -->
<label for="password">Re-Type Password</label>
<input id="rpassword" type="password" name="rpasswd" title="Re-Type your password." /><label id="err3">*</label>
<br />

<!-- Phone Number -->
<label for="body">Phone Number</label>
<input type="text" id="number" name="number" title="your Phone Number must be digit 0-9" /><label id="err4">*</label>
<br />

<!-- Street address -->
<label for="body">Street Address</label>
<input type="text" id="street" name="street" title="Street address of your home" /><label id="err5">*</label>
<br />

<!-- City -->
<label for="body">City</label>
<input type="text" id="city" name="city" title="city where you live" /><label id="err6">*</label>
<br />

<!-- State -->
<label for="body">State</label>
<input type="text" id="state" name="state" title="State where you live" /><label id="err7">*</label>
<br />

<!-- country -->
<label for="body">Country</label>
<input type="text" id="country" name="country" title="Country where you live" /><label id="err8">*</label>
<br />

<!-- Pin Code -->
<label for="body">Pin Code</label>
<input type="text" id="pin" name="pin" title="Pin code of your city" /><label id="err9">*</label>
<br />
<input type="submit" id="register" name="submit" value="submit" title="submit form" />
<br />
<br />
</div>

</form>

Jquery Validation of each field:

$(document).ready(function() {
$("#myform :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7

});
$("#email").blur(function(){
var email = $('#email').val();
$("#err1").text(checkEmail(email));
});

$("#password").blur(function(){
var passwd = $('#password').val();

$("#err2").text(checkPass(passwd));

});
$("#rpassword").blur(function(){
var rpasswd = $('#rpassword').val();
var passwd = $('#password').val();
$("#err3").text(checkRPass(passwd,rpasswd));

});
$("#number").blur(function(){
var number = $('#number').val();

$("#err4").text(checkNumber(number));

});

$("#street").blur(function(){
var street = $('#street').val();
$("#err5").text(checkStreet(street));

});
$("#city").blur(function(){
var city = $('#city').val();
$("#err6").text(checkCity(city));

});
$("#state").blur(function(){
var state = $('#state').val();
$("#err7").text(checkState(state));
});
$("#country").blur(function(){
var country = $('#country').val();
$("#err8").text(checkCountry(country));

});
$("#pin").blur(function(){
var pin = $('#pin').val();
$("#err9").text(checkPin(pin));

});

$('#myform').submit(function() {
var r=confirm("Do you really want to submit the form!")
if (r==true)
{
var email = $('#email').val();
var passwd = $('#password').val();
var rpasswd = $('#rpassword').val();
var number = $('#number').val();
var street = $('#street').val();
var city = $('#city').val();
var state = $('#state').val();
var country = $('#country').val();
var pin = $('#pin').val();

if(checkEmail(email)=='' && checkPass(passwd)=='' && checkRPass(passwd,rpasswd)=='' && checkNumber(number)=='' && checkStreet(street)=='' && checkCity(city)=='' && checkState(state)=='' && checkCountry(country)=='' && checkPin(pin)=='')
{
return true;
}
else
{
return false;
}
}
else
{
return false;
}
});

});

Validation Function:

function checkEmail(email)
{
var er='';
if(!isValidEmail(email))
{
er='invalid email';
}
else if (email == '')
{
er='required';
}
else
{
er='';
}
return er;
}

function checkPass(passwd)
{
var er='';
if (passwd == '')
{
er='required';
}
else
{
er='';
}
return er;
}
function checkRPass(passwd,rpasswd)
{
var er='';
if(passwd!=rpasswd)
{
er='Type Same Password';
}
else if (rpasswd == '')
{
er='required';
}
else
{
er='';
}
return er;
}
function checkNumber(number)
{
var er='';
if(isNaN(number))
{
er='Only number';
}
else if(number=='')
{
er='required';
}
else
{
er='';
}
return er;
}
function checkStreet(street)
{
var er='';
if(street=='')
{
er='required';
}
else
{
er='';
}

return er;
}
function checkCity(city)
{
var er='';
if(city=='')
{
er='required';
}
else
{
re='';
}

return er;
}
function checkState(State)
{
var er='';
if(State=='')
{
er='required';
}
else
{
re='';
}

return er;
}
function checkCountry(country)
{
var er='';
if(country=='')
{
er='required';
}
else
{
re='';
}

return er;
}
function checkPin(pin)
{
var er='';
if(isNaN(pin))
{
er='Only number';
}
else if(pin=='')
{
er='required';
}
else
{
er='';
}
return er;
}

function isValidEmail(str) {

return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
}

 

Download the full source code of the form validation script. I have also included database and database function file which is easy to configure.

Comment below if you are facing any kind of problem in customization or implementation.