Simple Form Validation By jQuery, Inline Form validation jQuery

Lot of people want form validation by using jQuery. It is very simple to use jQuery and to perform inline form validation. Just follow the following
some steps to do this task.

 1) Create a form and some of fields
 <form id=”buy-house” action=”” method=”post”>
    <ul>
<li> <input type=”text” name=”First_Name” class=”required” placeholder=”First Name” /></li>
        <li> <input type=”text” name=”Last_Name” class=”required” placeholder=”Last Name” /></li>
        <li> <input type=”text” name=”Email_Address” class=”required email” placeholder=”Email Address”  /></li>
        <li> <input type=”text” name=”Telephone” class=”required NumbersOnly” placeholder=”Telephone” /></li>
</ul>
<input  type=”submit” value=”submit”  title=”Submit” />
  </form>
  You have noticed that i have used class=”required” in fields. basically it is a jquery class that are given in jquery libray that you will
  include in you file as i have mentioned below. you have to place class attribute in that fields which you want to validate otherwise just
  leave a field empty in which you do not want to use this.
 
  2) Now Just download and include the following jQurery libraries.
  <script type=”text/javascript” src=”jquery.validate.min.js”></script>
           <script type=”text/javascript” src=”jquery.validate.js”></script>

 3) Now just write the following code to your file head section.
<script>  
$(document).ready(function(){
    $(“#buy-house”).validate({
});
 });
</script>
now just save the file and run it. Now your form is validating on client side by using jQuery just test it. You have inline validation.

4) If you want to customize your error messages you can use message in you jQuery funtion as i did below.

<script>  
$(document).ready(function(){
    $(“#buy-house”).validate({
messages: {
      First_Name: { required: “*First Name Required” },
 Last_Name: { required: “*Last Name Required” },
 Email_Address:{ required: “*Email Required” },
 Telephone :{ required: “*Telephone Required” },

   }
      });
 });
</script>

5) Now If you want to style your errors just use .error class it will be included automatically in your jQuery error messages.
<style type=”text/css”>
.error {
color:red;
    font-weight:bold;
font-style:italic
}
</style>
if You still find any problem just mention it in comments i will try to resolve those.