Categories: JavaScript

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” “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 ;
        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>

Developer Diary

Share
Published by
Developer Diary
Tags: JQuery

Recent Posts

Top 10 ChatGPT Prompts to Learn Anything 10x Faster

Introduction Learning has been transformed by artificial intelligence, which provides resources that enable you to…

11 months ago

Discover the Ultimate Tool for Frontend Designers and Developers

Introduction Even experienced developers may find it difficult to create aesthetically pleasing and useful web…

11 months ago

Git Tag Cheat Sheet

Introduction Git tags are an essential feature of version control systems, offering a simple way…

1 year ago

Understanding Web Storage: Cookies, Local Storage

Introduction The methods that browsers employ to store data on a user's device are referred…

1 year ago

Setting up OpenVPN Access Server in Amazon VPC – AWS

Introduction A well-known open-source VPN technology, OpenVPN provides strong protection for both people and businesses.…

1 year ago

Enhance Error Tracking & Monitoring: Integrate Sentry with Node.js & Express.js

Introduction Integrating Sentry into a Node.js, Express.js, and MongoDB backend project significantly enhances error tracking…

1 year ago