If you want to validate your form using jquery then below is a fully customize and very clear jquery validation script.
Preview :
What you have to do : If you have internet connection on your computer then you just need to be copy the entire below code and paste it into an html file and run on your borwser to test jquery validation.
Below is my entire form html code with jquery validation :
---------------------x------------------------My Code Start Here---------------------x--------------------------------x
<html>
<title>php sollution form validation script</title>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.error{color:red;}
.success{color:green;}
</style>
</head>
<body>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="10">
<tr>
<td align="center" style="font-size:25px; padding:7px;">
<div style="width:550px;">Sign Up User Form</div>
</td>
</tr>
</table>
<!--<form action="fwd.php?a=review" method="post"> -->
<form method="post" action="signup.php" name="create_account" id="frmid">
<input type="hidden" value="a977610c21b9741b1339847c2eda12ba" name="formid">
<input type="hidden" value="process" name="action">
<table width="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td style="width:50%;" align="right">First Name:</td>
<td>
<input name="firstname" type="text" id="firstname" size="40" /><span class="inputRequirement">*</span>
<div id="firsterror"></div>
</td>
</tr>
<tr>
<td style="width:50%;" align="right">Middle Name:</td>
<td><input name="middlename" type="text" size="40" /></td>
</tr>
<tr>
<td style="width:50%;" align="right">Last Name:</td>
<td><input name="lastname" type="text" id="lastname" size="40" /><span class="inputRequirement">*</span>
<div id="lastnameerror"></div>
</td>
</tr>
<tr>
<td align="right">Date of Birth:</td>
<td><input id="dob" type="text" onblur="checkDate()" name="dob" size="13" /><span class="inputRequirement">*(eg. 05/21/1970)</span>
<div id="doberror"></div>
</td>
</tr>
<tr>
<td align="right">Primary Contact:</td>
<td><input name="phone1" type="text" id="phone1" size="40"/><span class="inputRequirement">*</span>
<div id="phone1error"></div>
</td>
</tr>
<tr>
<td align="right">Secondary Contact:</td>
<td><input name="phone2" type="text" size="40" /></td>
</tr>
<tr>
<td align="right">E-mail Address:</td>
<td><input type="text" id="emailId" onblur ="checkEmail()"name="email_address" size="40"/><span class="inputRequirement">*</span>
<div id="emailIderror"></div>
</td>
</tr>
<tr>
<td align="right">Package:</td>
<td><select name="package1" style="width:150px; font-size:12;">
<option style="width:100px; font-size:12;" value="">-- Please Select --</option>
<option style="width:100px; font-size:12;" value="10000"> Premier </option>
<option style="width:100px; font-size:12;" value="20000"> Silver </option>
<option style="width:100px; font-size:12;" value="30000"> Gold </option>
</select><span class="inputRequirement">*</span></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input name="username" type="text" id="username" size="40" /><span class="inputRequirement">*</span>
<div id="usernameerror"></div></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="password" type="password" id="password" maxlength="40" size="40" /><span class="inputRequirement">*</span>
<div id="passworderror"></div></td>
</tr>
<tr>
<td align="right">Confirm Password:</td>
<td><input type="password" maxlength="40" id="confirmation" name="confirmation" size="40"/><span class="inputRequirement">*</span>
<div id="confirmationerror"></div></td>
</tr>
<tr>
<td colspan="2" align="center"><br /><input class="button" type="submit" value="Sign Up" name="create" /><br /><br /></td>
</tr>
</table>
</form>
<br>
<br></td>
</body>
</html>
<script>
$(document).ready(function(){
//global vars
var form = $("#frmid");
var firstname = $("#firstname");
var firsterror=$("#firsterror");
var lastname = $("#lastname");
var lastnameerror=$("#lastnameerror");
var dob = $("#dob");
var doberror=$("#doberror");
var phone1 = $("#phone1");
var phone1error=$("#phone1error");
var emailId = $("#emailId");
var emailIderror=$("#emailIderror");
var username = $("#username");
var usernameerror=$("#usernameerror");
var password = $("#password");
var passworderror=$("#passworderror");
var confirmation = $("#confirmation");
var confirmationerror=$("#confirmationerror");
var captcha = $("#captcha");
var captchaerror=$("#captchaerror");
firstname.blur(validatefirstname);
lastname.blur(validateLastName);
dob.blur(validateDoB);
phone1.blur(validatePhone1);
emailId.blur(validateEmail);
username.blur(validateUserName);
password.blur(validatePassword);
confirmation.blur(validateConPassword);
captcha.blur(validateCaptcha);
//On Submitting
form.submit(function(){
if(validatefirstname() & validateLastName() & validateDoB()& validatePhone1() & validateEmail() & validateUserName() & validatePassword() & validateConPassword() & validateCaptcha())
return true;
else
return false;
});
function validatefirstname(){
//if it's NOT valid
if(firstname.val() == ""){
firsterror.text("Please Enter Firstname");
firsterror.addClass("error");
return false;
}
//if it's valid
else{
firsterror.text("");
firstname.addClass("success");
return true;
}
}
function validateLastName(){
//if it's NOT valid
if(lastname.val() == ""){
lastnameerror.text("Please Enter Lastname");
lastnameerror.addClass("error");
return false;
}
//if it's valid
else{
lastnameerror.text("");
lastname.addClass("success");
return true;
}
}
function validateDoB(){
//if it's NOT valid
if(dob.val() == ""){
doberror.text("Please Enter Date of Birth");
doberror.addClass("error");
return false;
}
//if it's valid
else{
doberror.text("");
dob.addClass("success");
return true;
}
}
function validatePhone1(){
//if it's NOT valid
if(phone1.val() == ""){
phone1error.text("Please Enter Primary Contact No");
phone1error.addClass("error");
return false;
}
//if it's valid
else{
phone1error.text("");
phone1.addClass("success");
return true;
}
}
function validateEmail(){
//if it's NOT valid
var a = $("#emailId").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(emailId.val() == ""){
emailIderror.text("Please Enter Email Address");
emailIderror.addClass("error");
return false;
}else if(filter.test(a)==false){
emailIderror.text("Please enter Valid email address");
emailIderror.addClass("error");
return false;
}else{
emailIderror.text("");
emailId.addClass("success");
return true;
}
}
function validateUserName(){
//if it's NOT valid
if(username.val() == ""){
usernameerror.text("Please Enter User Name");
usernameerror.addClass("error");
return false;
}
//if it's valid
else{
usernameerror.text("");
username.addClass("success");
return true;
}
}
function validatePassword(){
//if it's NOT valid
if(password.val() == ""){
passworderror.text("Please Enter Password");
passworderror.addClass("error");
return false;
}
//if it's valid
else{
passworderror.text("");
password.addClass("success");
return true;
}
}
function validateConPassword(){
//if it's NOT valid
if(confirmation.val() == ""){
confirmationerror.text("Please Enter Confirm Password");
confirmationerror.addClass("error");
return false;
}
//if it's valid
else{
confirmationerror.text("");
confirmation.addClass("success");
return true;
}
}
function validateCaptcha(){
//if it's NOT valid
if(captcha.val() == ""){
captchaerror.text("Please Enter Confirm Password");
captchaerror.addClass("error");
return false;
}
//if it's valid
else{
captchaerror.text("");
captcha.addClass("success");
return true;
}
}
});
</script>
------------------------x--------------------------------End here---------------------x-----------------------------------x
If you guy are having problem during implementation then you can contact me for instant reply. I am happy to help you ...
Happy coding guys :)