Pages

Thursday, April 8, 2010

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 thecallOnloadfunction:callOnload()is the function that finds all input elements which have attributeisvalidate with the valuetrue. After that, it applies mandatory class to all found input fields and assignsonkeyUpfunction 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 valuetrue and checks value of it. If the value is empty, it accesses value oferrpMsg 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 mandatoryisvalidate= false means it is non-mandatoryerrprMsg= message gets displayed when the field is empty.