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

Easy, proficient and generic Web form validations

, 24 Apr 2008
Rate this:
Please Sign up or sign in to vote.
Generic web form validations that can be used in all kind of web forms

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

S. No. Attribute Name Attribute Value Description
1. Mandatory Yes/No It will decide whether it require or not
2. cntTitle Caption of that control For example: txtAmount should have caption Amount
3. valRule IsPositiveInteger,
IsPositiveDecimal,
IsPositiveNDecimal,
IsSignedIntNDecimal,
IsSignedFloatNDecimal,
IsValidEmail,
IsValidURL,
IsValidDate
As per attribute value, rule will be applied
4. minNumVal Any numeric value It won’t allow number value less than this attribute value and it would work only if we have applied correct valRule
5. maxNumVal Any numeric value It won’t allow number value greater than this attribute value and it would work only if we have applied correct valRule
6. minDateVal Any date It won’t allow date value less than this attribute value and it would work only if we have applied correct valRule
7. maxDateVal Any date It won’t allow date value greater than this attribute value and it would work only if we have applied correct valRule

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:

S. No. Attribute Name Attribute Value Description
1. cntTitle Caption of that control For example: lstItem should have caption Item

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

S. No. Attribute Name Attribute Value Description
1. cntTitle Caption of that control, use same caption for same group of radio buttons For example: rtGender should have caption Gender


Always create one span having id as span_<Radio Button name> and set style as below:

<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

S. No. Attribute Name Attribute Value Description
1. cntTitle Caption of that control For example: chkTerms should have caption Terms & Conditions

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.

License

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

Share

About the Author

Vinay Krishna
Software Developer Cegedim Software India Pvt Ltd
India India
I am a Software Professional worked as developer, tech lead, consultant and architect. I have Developed many portals and Client Server based applications using .Net, Plumtree, Business Object, COM/DCOM, RDBMS and OOP concepts that is easy to use and greatly enhance user’s ability in their work.
 
I am flourished in a fast-paced environment requiring excellent problem solving skills, multiple project completion under short deadlines and the ability to communicate with clients and end users.
 
As an architect I highly relied on my involvement and integration with the project teams. I played good role to understand the actual requirements and needs of the User. I decided the best technology to use based on the gathered requirements and designed more flexible, user friendly and robust system. I was the bridge between developers, project manager and business experts and ensured the technical directions and choices to build durable architectures.
 
I had worked with Nagarro, Algorism, Mascon etc earlier and played all different roles successfully.
Currently I am working with Cegedim, world’s leading CRM business for the life science industry, as a Senior Specialist. I have been here since April 2007.
 
http://www.linkedin.com/in/vinaykrishna

Comments and Discussions

 
GeneralNumber validation Pinmemberleonardas25-Apr-08 3:05 
GeneralRe: Number validation PinmemberVinay Krishna27-Apr-08 18:18 

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
Web04 | 2.8.140821.2 | Last Updated 25 Apr 2008
Article Copyright 2008 by Vinay Krishna
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid