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

{

   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 attributeisvalidate 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