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.
