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.

Read More

Use Image Instead of Radio Button Html forms

In one of my project I found a requirment of Images instead of radio button. I saw it first time and get confused and I started thinking
what should do and how can i implement it. At last thanks to javascript, Who made me enable to solve this problem. May be you can write a
better code than me but here I want to show how I have implemented it.

   <ul>
         <li>
   <label id="label1" for="developer1" onclick="change1()"><image id="111"src="image1.jpg" </label>
   <input id="developer1" style="display:none" type="radio" name="developer" value="1"  />
</li>
<li>
   <label for="developer2" onclick="change2()"><image id="222" src="image2.jpg" </label>
   <input id="developer2" style="display:none" type="radio" name="developer"  value="2" />
</li>
<li>
   <label for="developer3" onclick="change3()"><image id="333" src="image3.jpg" </label>
   <input id="developer3" style="display:none" type="radio" name="developer"  value="3" />
</li>

     </ul>

Here in label i have used three images names image1, image2 and image3 respectivly. Now for each of these image i have also make a border image.
so that when a person select and images a border image should replace its orignal image. May be you can do it in different way i.e throw css, javaScript
etc.

Following is my javaScript code. Please dont worry its very easy.

<script type="text/javascript">
imgs1=Array("image1.jpg","image1border.jpg");
imgs2=Array("image2.jpg","image2border.jpg");
imgs3=Array("image3.jpg","image3border.jpg");
var x=0;
var y=0;
var z=0;
function change1() {
document.getElementById("111").src=imgs1[++x];
document.getElementById("222").src=imgs2['0'];
document.getElementById("333").src=imgs3['0'];
if (x==1) {
x=0;
}
else
x=1;

}

function change2() {
document.getElementById("111").src=imgs1['0'];
document.getElementById("222").src=imgs2[++y];
document.getElementById("333").src=imgs3['0'];
if (y==1) {
y=0;
}
else
y=1;

}

function change3() {
document.getElementById("111").src=imgs1['0'];
document.getElementById("222").src=imgs2['0'];
document.getElementById("333").src=imgs3[++z];
if (z==1) {
z=0;
}
else
z=1;

}
</script>
If you want that by default one button should be selected just change the order of image in that array and put checked in that radio button.
If you are still confuse just write your problem in comment i will try to help you.

Read More