Skip to content

Jquery Validation Example 2

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” “”>
  <title> New Document </title>
  <meta name=”Generator” content=”EditPlus”>
  <meta name=”Author” content=””>
  <meta name=”Keywords” content=””>
  <meta name=”Description” content=””>
<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
        rules: {
            first_name: “required”,
            last_name: “required”,
            gender: “required”,
            email: “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”



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


<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>
         <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”/>
    </div> <!–body area ends–>