Easy, proficient and generic Web form validations

• Download Web_Validation - 2.76 KB

Introduction

While creating any web form, it is always important to check and validate the information that user enters. It’s an important task of web form development. Two types of validations are used to check the information, one is Server-side and another is Client-side. This time we will learn to write easy and proficient Client-side validations. I have created one generic javascript file (CommonValidations.js) that contains several functions. Then, I have defined some attributes that we need to set while creating any web form based up on the requirements. After that only we need to use that js file within our web form.

Using the code

Let us understand the attributes we need to set while creating HTML controls.

HTML Text Box control

Always create one span having id as span_<text box id> and set style as below:

<input name="txtAmt" type="text" id="txtAmt" Mandatory="Yes" minNumVal="5" valRule="IsPositiveDecimal" cntTitle="Amount" >
<span id="span_txtAmt" style="display:none;color:Red"> </span>

HTML List control:

Always create one span having id as span_<List control id> and set style as below:

<select name="lstItem" id="lstItem" cntTitle="Item">
     <option value="Please Select1">Select List1</option%gt;
     <option value="Item 1">Item 1</option>
</select>

HTML Radio Button Control

<input value="Male" name="rdGndr" type="radio" id="rdMale" cntTitle="Gender" />
<input value="Female" name="rdGndr" type="radio" id="rdFemale" cntTitle="Select radio" />
<span id="span_rdGndr" style="display:none;color:Red"></span>

HTML Check Box Control

Always create one span having id as span_<check box id> and set style as below:

<input name="chkTerms" type="checkbox" id="chkTerms" cntTitle="Terms and Conditions" />
<span id="span_chkTerms" style="display:none;color:Red"></span>

I have used several regular expressions for different kind of validations. Please see below IsValid function from CommonValidation.js file.

//Apply Rule and Validate
 function IsValid(valRule,valCnt)
 {
    var nPattern;
    var matchVal;
    switch(valRule)
    {
    case "IsPositiveInteger":
        nPattern = /^(0|[1-9][0-9]*)$/;
        spanText = "Only positive integer value allowed";
        break;
    case "IsPositiveDecimal":
        nPattern = /^([-+]?[0-9]*\.?[0-9]+)$/;
        spanText = "Only positive decimal value allowed";
        break;
    case "IsPositiveNDecimal":
        nPattern = /(^(0|[1-9][0-9]*)$)|((^(0?|[1-9][0-9]*)\.(0*[1-9][0-9]*)$)|(^[1-9]+[0-9]*\.0+$)|(^0\.0+$))/;
        spanText = "Only positive and decimal value allowed";
        break;
    case "IsSignedFloatNDecimal":
        nPattern = /^([-+]?[0-9]*\.?[0-9]+)$/;
        spanText = "Only signed float and decimal value allowed";
        break;
    case "IsValidEmail":
        nPattern = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
        spanText = "Please enter valid email id";
        break;
    case "IsValidURL":
        nPattern = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$";
        spanText = "Please enter valid URL";
        break;
    }
    matchVal = valCnt.match(nPattern);
    if (matchVal == null)
    {
        return false;
    }
    return true;
 }

As per your requirement you can add more regular expressions and free to modify the existing one. I have collected these regular expressions from different sources and thankful to them. I have tried to use the most common one that I found during development of my projects.