Jquery Validation Example 2

By May 3, 2012 Jquery
Fresher need to understand jquery validation. So we have made very easy to understand example as follows.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
 <head>
  <title> New Document </title>
  <meta name=”Generator” content=”EditPlus”>
  <meta name=”Author” content=””>
  <meta name=”Keywords” content=””>
  <meta name=”Description” content=””>
 </head>
<script type=”text/javascript” src=”jquery-latest.js”></script>
<script type=”text/javascript” src=”jquery.validate.js”></script>
<script type=”text/javascript”>

$(document).ready(function() {   

    // validate signup form on keyup and submit
    $(“#frmregisterproc”).validate({
        rules: {
            first_name: “required”,
            last_name: “required”,
            gender: “required”,
            email: “required”,           
            password:”required”,
            c_password:”required”,
            location:”required”,

            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            password: {
                required: true
            },
            c_password: {
                required: true,
                equalTo: “#password”
            },
            contact_no: {
                required: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {           
            first_name: {
                required: “Please enter First Name”
            },
            last_name: {
                required: “Please enter Last Name”
            },
            gender: “Please select Gender”,
            email: “Please enter a valid email address”,
            password: “Please enter Password”,
            c_password: {
                required: “Please enter Confirm Password”,
                equalTo: “Pasword and Confirm Password not same”

            },
            location: “Please enter Location”

           
        }
    });

});
</script>

<style type=”text/css”>
    .error{
        display: inline;
        margin-left: 10px;
        width: auto !important;
        color: red;
        font-style: italic;
    }
</style>

</head>

<body>
<div class=”mainWrapper clearfix”>   
    <div class=”bodyArea”>  <!–body area starts–>
    <div class=”popUpForm”>  

         <div class=”formContnets” id=”formContnets”>

       <form name=”frmregisterproc” id=”frmregisterproc” method=”post” action=””>
   
        <label for=”name”><span>* </span>First Name:</label>
        <input type=”text” name=”first_name” id= “first_name” value=”” /><br />

        <label for=”name”><span>* </span>Last Name:</label>
        <input type=”text” name=”last_name” id= “last_name” value=”” /><br />

        <label for=”gender”><span>* </span>Gender:</label>
        <select name=”gender” id=”gender”>
                <option value=””>Select Gender</option>
                <option value=”Male”>Male</option>
                <option value=”Female”>Female</option>
         </select>
         <br />

        <label for=”email”><span>* </span>Email Address:</label>
        <input type=”text” name=”email” id=”email” value=”” /><br />

        <label for=”college_name”><span>* </span>Password:</label>
        <input type=”password” name=”password” id=”password” value=”” /><br />
           

        <label for=”class_year”><span>* </span>Confirm Password:</label>
        <input type=”password” name=”c_password” id=”c_password” value=”” /><br />

        <label for=”contact_no”><span>* </span>Location:</label>
        <input type=”text” name=”location” id=”location” value=”” /><br />
       
       
          <input type=”submit” name=”submitbutton” id=”submitbutton” value=”Submit” class=”submitbutton”/>
      
        </form>
    </div>
   
    </div>
    </div> <!–body area ends–>
   
</div>

</body>
</html>

Leave a Reply

73 − = 68