User Id :    Password :      New Member   Forgot Password  
 
Generic Code of Validating Fields with Jquery
Description Generic Code of Validating Fields with Jquery   No. of Views     873
  Rating     0
Author Pranay Rana   Posted On     23 Apr 2012
Tags ASP.NET,Java Script,JQuery and ASP.Net    

Sample Code   Download Code

 

 

Introduction

This article demonstrates how to write generic code for validating form input fields and to present the required field in a different form. In this, I have created code that is reusable and it's applicable to not only ASP.NET website but can also be applied to any PHP or other language website. Below is the final output of the code:

 

 

Background

Before starting this code, I always wondered how to represent my required field so it becomes more user friendly for it to be understood by the end user. To find out a solution for this, I went through the basic JQuery book named JQuery in action. JQuery is nowadays known to most of the web developers which is next door to Java library providing an easy way to code JavaScript and manipulate the form element.
Using the Code

As mentioned earlier, this article represents the required fields in a different manner to the end user of the web application and validates form input fields. Following is the code description which gives you a more detailed idea of how it works. Let's start with the creation of style sheet which is used to represent fields on form. I have created two style sheets as you see in the below code template:

    * .mandatory- It is the CSS class for the required fields to represent fields in pink format
    * .normal – It gets applied to input field after text is entered by the end user in text box.
 

 

<style>
.mandatory
{
   background-color: Pink;
   font-size: 15px;
}

.normal
{
   background-color: Transparent;
   font-size: 15px;
}
</style>

 

After style sheet, the following code describes the JavaScript used: Following is the list of functions:

After document gets loaded completely, jquery library ($(document).ready) function gets called first which in turn calls the callOnload function: callOnload() is the function that finds all input elements which have attribute isvalidate with the value true. After that, it applies mandatory class to all found input fields and assigns onkeyUp function to each. Onkeyup function gets called when the user enters a value in the input field which assigns class normal if value is entered by the end user and it assigns mandatory class if value is removed from the input field. ("#btnSubmit").click – This line of code finds click function with submit. So when button gets clicked, it finds all input elements with attribute isvalidate having value true and checks value of it. If the value is empty, it accesses value of errpMsg attribute and displays message to the end user.

 

<script type="text/javascript">

    <script src="JavaScript/jquery.js" type="text/javascript"></script>
   function callOnload()
   {
      $("input[isvalidate=true]").each(
                              function(n)
                              {
                                 $('#' +this.id).addClass('mandatory');
                                 this.onkeyup=function()
                                 {
                                    if(this.value==='')
                                    {
                                       $('#' +this.id).removeClass('normal');
                                       $('#' +this.id).addClass('mandatory');
                                    }
                                    else
                                    {
                                       $('#' +this.id).removeClass('mandatory');
                                       $('#' +this.id).addClass('normal');
                                    }
                                 }
                              }
                        );

         $("#btnSubmit").click(
                              function()
                              {
                                  $("input[isvalidate=true]").each(
                                  function(n)
                                  {
                                     if(this.value==='')
                                     {
                                        alert($('#' +this.id).attr('errprMsg'));
                                     }
                                  }
                                 );
                                return false;
                              }
                           );
   }
   $(document).ready(callOnload);
</script>

 

Following is the HTML code of the page in that you look for the following attributes which are associated with the input fields of the form: isvalidate= true means it is mandatory isvalidate= false means it is non-mandatory errprMsg= message gets displayed when the field is empty.

 

<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" Width="150px" ID="lbl1" Text="User Name"></asp:Label>
<asp:TextBox runat="server" ID="txt1" isvalidate="true" 
	errprMsg="Enter value in User Name"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Width="150px" ID="Label1" Text="Password"></asp:Label>
<asp:TextBox runat="server" TextMode="Password" ID="TextBox1" 
	isvalidate="true" errprMsg="Enter value in Password"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Width="150px" ID="Label2" Text="Email id"></asp:Label>
<asp:TextBox runat="server" ID="TextBox2" isvalidate="false" 
	errprMsg="Enter value in Email id"></asp:TextBox>
</div>
<div>
<asp:Button runat="server" ID="btnSubmit" Text="Validate" />
</div>
</form>
</body>

 

Points of Interest

With the above code, the developer will get an idea that JQuery can create its new library which allows the developer to code their JavaScript easily without writing too much messy JavaScript code.

 

About Author

About Author Hey, I am Pranay Rana, working as a Senior Software engineer. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5 years now.
For me def. of programming is : Programming is something that you do once and that get used by multiple for many years
You can visit me on my blog - http://pranayamr.blogspot.com/
Pranay Rana
No Photo
 
Country India
Company GMind Solutions
Home Page http://pranayamr.blogspot.com/

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

   
Write your comment here.
Comment
Verification Code