Click here to Skip to main content
Click here to Skip to main content

Generic Code of Validating Fields with Jquery

, 15 Nov 2009
Rate this:
Please Sign up or sign in to vote.
Generic code of validating fields with Jquery

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
<span class="code-none">{
   background-color<span class="code-none">: Pink<span class="code-none">;
   font-size<span class="code-none">: 15px<span class="code-none">;
<span class="code-none">}

.normal
<span class="code-none">{
   background-color<span class="code-none">: Transparent<span class="code-none">;
   font-size<span class="code-none">: 15px<span class="code-none">;
<span class="code-none">}
</style></span></span></span></span></span></span></span></span></span></span></span></span>

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.

Reference

  • JQuery in Action

History

  • 12th November, 2009: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Pranay Rana
Software Developer (Senior) GMind Solusion
India India

Microsoft C# MVP (12-13)

 
Hey, I am Pranay Rana, working as a ITA in MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.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 my blog

StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr
 
Awards:


Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 1 PinmemberNaveen.255918-Jan-10 23:03 
GeneralPoor article, invalid HTML and frontend only PinmemberTom Kleijkers7-Jan-10 23:30 
GeneralMy vote of 1 PinmemberTom Kleijkers7-Jan-10 23:28 
GeneralGood Article for Jquery Beginners PinmemberMember 282127825-Nov-09 6:07 
GeneralRe: Good Article for Jquery Beginners PinmemberAnil Srivastava21-Jan-10 18:50 
GeneralRe: Good Article for Jquery Beginners PinmemberPranay Rana23-Dec-10 22:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 15 Nov 2009
Article Copyright 2009 by Pranay Rana
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid