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.
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]+:
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.
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