Things to validate
1) Is it always positive amount?
2) Should not allow user to enter characters other than (0123456789-.).
3) Should not allow user to type “.”, if value in text box already has “.”.
4) Should not allow user to type “-”, if value in text box already has “-”.
5) Should insert “-“at zero (0) index when user types “-“at index other than zero.
HTML Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
//list of characters that are to be allowed for a valid double value (either positive or negative)
var PosDoubleChars=".0123456789";
var NegDoubleChars="-.0123456789";
//function that add's events to the given text box control to handle it for amount validations
function AmountControl(obj,msg,blnNeg)
{
//Checking if textbox control should allow negative or positive double values
if(blnNeg)
AllowNegDouble(obj);
else
AllowPosDouble(obj);
//setting on focus out event to automatically format given input anount
obj.onfocusout=function(){ValidateAmount(obj,msg,blnNeg);};
}
function AllowNegDouble(obj)
{
AllowChars(obj,NegDoubleChars);
}
function AllowPosDouble(obj)
{
AllowChars(obj,PosDoubleChars);
}
function AllowChars(obj,argChrs)
{
//adding key press evet to restrict user from entering characters other than mentioned list
//of double characters
obj.onkeypress=function(){return CheckChar(obj,event.keyCode,argChrs);}
}
//checking the character code to allow it.
function CheckChar(obj,kyCd,argChrs)
{
if(argChrs==PosDoubleChars)
{
if(kyCd>=46 && kyCd<=58 )
{
if(kyCd==47)
{
return false;
}
if(kyCd==46)
{
for(var i=0;i<obj.value.length;i++)
{
if(obj.value.charAt(i)=='.')
{
return false;
}
}
}
return true;
}
return false;
}
if(argChrs==NegDoubleChars)
{
if((kyCd>=46 && kyCd<=58) || (kyCd==45))
{
if(kyCd==47)
{
return false;
}
if(kyCd==45)
{
if(obj.value.indexOf('-')!=-1)
{
return false;
}
else
{
obj.value='-'+obj.value;
return false;
}
}
if(kyCd==46)
{
for(var i=0;i<obj.value.length;i++)
{
if(obj.value.charAt(i)=='.')
{
return false;
}
}
}
return true;
}
return false;
}
}
//validating and fomratting amount
function ValidateAmount(obj,msg,blnNeg)
{
obj.value=replaceAll(obj.value,',','');
var amtval=obj.value;
if(amtval=='')
return true;
var numb=obj.value.substr(0,obj.value.indexOf('.'));
if(numb.length<=16)
obj.value=FormatAmount(parseFloat(obj.value).toFixed(4));
if(obj.value=="NaN")
obj.value="0.00";
return true;
}
//to replace specific character with speific character in given input string
function replaceAll(wrd,frm,to)
{
var Char;
var fnl='';
for (i = 0; i < wrd.length ; i++)
{
if (wrd.charAt(i)==frm)
{
fnl+=to;
}
else
fnl+=wrd.charAt(i);
}
return fnl;
}
//auto formatting
function FormatAmount(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
</head>
<body>
Amount : <input type="text" id="txtAmount" />
<script>
//I am calling the above created function saying ‘txtAmount’ as amount control //that should handle all above validations.
//It should allow negative decimals as I said true
AmountControl(document.getElementById('txtAmount'),'Please enter valid amount',true);
</script>
</body>
</html>
UI :
 |
Intput:
 |
1) It it allowing me to enter negative value but if once"-" is typed in middle it is automatically getting inserted at beginning and not allowing to type “-“ again if the amount is already negative.
2) It is allowing me to type "." But if amount is already having decimal it is not allowing to type “." again if the amount is already negative.
3) Not allowing me to type characters other than specified (0123456789-.).
4) Automatically formatting amount by rounding off to 4 decimals if user focuses out from the amount text box.
Output:
 |
No comments:
Post a Comment