Jquery customizable validation?

Jquery customizable validation

Add latest jquery file in the top of the page

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('#submit').click(function() {
  alert('sagar');
  $(".error").hide();
  var hasError = false;
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var emailblockReg = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)

(?!aol.com)([\w-]+\.)+[\w-]{2,4})?$/;
  var fname = $("#fname").val();
  var lname = $("#lname").val();
  var Email = $("#email").val();
  var password = $("#password").val();
  var cpassword = $("#cpassword").val();
  var address = $("#address").val();
  var zipcode = $("#zipcode").val();
  var state = $("#state").val();
  var phone = $("#phone").val();
  var image = $("#image").val();

  
    if(fname == '') {
    $("#fname").after('<span class="error">Please enter your first name.</span>');
    $("#fname").focus();
    hasError = true;
    }
  
    if(lname == '') {
    $("#lname").after('<span class="error">Please enter your last name.</span>');
    $("#lname").focus();
    hasError = true;
    }
  
    if(Email == '' || Email == 'Email') {
    $("#email").after('<span class="error">Please enter your email address.</span>');
    $("#email").focus();
    hasError = true;
    } else if(!emailReg.test(Email)) {
    $("#email").after('<span class="error">Enter a valid email address.</span>');
    $("#email").focus();
    hasError = true;
    }
    if(password == '') {
    $("#password").after('<span class="error">Please enter your password.</span>');
    $("#password").focus();
    hasError = true;
    }
    if(cpassword == '') {
    $("#cpassword").after('<span class="error">Please confirm password.</span>');
    $("#cpassword").focus();
    hasError = true;
    }
    if(address == '') {
    $("#address").after('<span class="error">Please enter your address.</span>');
    $("#address").focus();
    hasError = true;
    }
   
    if(zipcode == '') {
    $("#zipcode").after('<span class="error">Please enter your zipcode.</span>');
    $("#zipcode").focus();
    hasError = true;
    }
    if(state == '') {
    $("#state").after('<span class="error">Please select your state.</span>');
    $("#state").focus();
    hasError = true;
    }
    if(phone == '') {
    $("#phone").after('<span class="error">Please enter your phone number.</span>');
    $("#phone").focus();
    hasError = true;
    }
    if(image == '') {
    $("#image").after('<span class="error">Please enter your last name.</span>');
    $("#image").focus();
    hasError = true;
    }


  if(hasError == true) { return false; }
  });
 
 
});
</script>



<!--  here is the html part -->



<p>
<form name="register" id="register" action="registration-save.php" enctype="multipart/form-data" method="post">
<table width="500" border="0" >
  <tr>
    <td>First name:</td>
    <td><input type="text" name="fname" id="fname" value="" /></td>
  </tr>
  <tr>
    <td>Last name:</td>
    <td><input type="text" name="lname" id="lname" value="" /></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="email" id="email"  style="color:#8B8B8B" value="Email" onfocus="if(this.value == 'Email'){this.value=''; this.style.color='#000000';}" onblur="if(this.value==''){ this.value='Email'; this.style.color='#8B8B8B';}"/></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" name="password" id="password" value="" /></td>
  </tr>
  <tr>
    <td>Confirm Password:</td>
    <td><input type="password" name="cpassword" id="cpassword" value="" /></td>
  </tr>
  <tr>
    <td>Address:</td>
    <td><input type="text" name="address" id="address" value="" /></td>
  </tr>
  <tr>
    <td>Zip Code:</td>
    <td><input type="text" name="zipcode" id="zipcode" value="" /></td>
  </tr>
  <tr>
    <td>State:</td>
    <td><select name="state" id="state">
    <option value="">select</option>
    <option value="UP">Up</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Contact Number:</td>
    <td><input type="text" name="phone" id="phone" value="" /></td>
  </tr>
  <tr>
    <td>Image:</td>
    <td><input type="file" name="image" id="image"  />
    <input type="hidden" name="regid" value="utfid" />
    </td>
  </tr>
  <tr>
    <td>Submit</td>
    <td><input type="submit" name="submit" id="submit" value="submit"/></td>
  </tr>
</table>
</form>

</p>



Simply copy and paste this code and  run the file and get the jquery validation according to your need