<!--Begin mask_functions.html -->
<script type="text/javascript">
/* ***********************************************************************
*
* Function Name: maskKey()
*
* Author: toby.jones at putnam-fl.com
* gary.zabriskie at putnam-fl.com
*
* Purpose: the ultimate field mask and validation system
* - denies invalid input on keystrokes
*
* Arguments: inputbox: 'this' special parameter for <input>
* mask_type: predefined mask type {parcel, military_time, casenum ...}
* custom_mask: -NOT WORKING YET -if mask_type is "custom" this reg-ex is used
* Return Values: key event to 'this' parameter'
*
* Function calls: none
*
* *note: For dates, use the gui date picker on G:, to automatically validate
* ***********************************************************************/
function maskKey(keyevent, inputbox, mask_type, custom_mask ){
var usingmask="default";
switch (mask_type){
case 'test': //-- this mask is a simple sample
var testmask=new RegExp("^([0-9]{1}-[A-Z]{1})$","i"); // todo: need to assemble usingmask from testmask with '|'
// The mask needs an '|' operator between decreasing (by one char) length permutations of the base regular expression.
// This allows matching on each keystroke. There may be a regex syntax that does the same but I haven't found it.
// -or- use {0,} quantifiers like parcelmask=/^(\d{0,2}-{0,1}\d{0,2}-{0,1}\d{0,2}-{0,1}\d{0,4}-{0,1}\d{0,4}-{0,1}\d{0,4})$/i;
// to make the mask work incrementally
// *note a different function called in blurCheckength()should be used to check the final length of input.
//The test mask end target is: number dash alpha (9-Z will fit)
//direct declaration - just as good but harder to generate and manage than constructor strings
//usingmask=/^([0-9]{1}-[A-Z]{1}|[0-9]{1}-|[0-9]{1})$/i;
//RegExp object constructor
usingmask=new RegExp("^([0-9]{1}|[0-9]{1}-|[0-9]{1}-[A-Z]{1})$","i");
// todo: call maskAutoFill once for each mask delimeter
maskAutoFill(inputbox.value,inputbox,'1','-');
break;
case 'military_time':
//usingmask=/^[0-2]{1}[0-9]{1}:[0-5]{1}[0-9]{1}$/i; //base mask
//usingmask=/^([0-2]{1}[0-9]{1}:[0-5]{1}[0-9]{1}){0,5}$/i; //base mask
usingmask=/^([0-2]{1}[0-9]{1}:[0-5]{1}[0-9]{1}|[0-2]{1}[0-9]{1}:[0-5]{1}|[0-2]{1}[0-9]{1}:|[0-2]{1}[0-9]{1}|[0-2]{1})$/i;
//usingmask=newRegExp("^([0-1]{0,1}[0-9]{0,1}:[0-5]{0,1}[0-9]{0,1} [A,P]{0,1}M)?","i")
maskAutoFill(inputbox.value,inputbox,'2',':');
break;
case 'parcel':
//sample parcel 00-00-00-0000-0000-0001
//usingmask=/^[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/i; //base mask
//usingmask=/^\d{2}-\d{2}-\d{2}-\d{4}-\d{4}-\d{4}$/i; //base mask alt
usingmask=/^(\d{0,2}-{0,1}\d{0,2}-{0,1}\d{0,2}-{0,1}\d{0,4}-{0,1}\d{0,4}-{0,1}\d{0,4})$/i;
//usingmask=newRegExp("","i")
maskAutoFill(inputbox.value,inputbox,'2,5,8,13,18','-');
break;
case 'phone':
//todo
break;
case 'custom' :
usingmask=custom_mask;
break;
case 'test2': //-- this mask is used for testing and enhancing features
// Design code for deriving all the regex permutations and seperator chars from just the base regular expression
//base regular expression
var testmask=new RegExp("^([0-9]{1}-[A-Z]{1})$","i"); //base regular expression
// todo: need to assemble usingmask from testmask with '|'
// ** note ** must use {1},{2},{...} count descriptors to use autofill scheme even for 1 char
//replace ends with nothing;
var separators="[0-9]{1}-[A-Z]{1}";
//replace [*] with nothing;
separators="{1}-{1}";
//replace { and } with nothing separatly;
separators="1-1";
var tempchar='';
var position=0;
//now do math (add) on count descriptors to get position
for (var k = 0; k <= separators.length; k++){
tempchar=separators.substring(k, k+1)
if (isNumeric(tempchar)){
//add to position
position=position+tempchar;
} else{
//create the position parameter
//create the delimeter parameter
//******** for now make manual calls to maskAutoFill()
} // end else numeric
}// end for
usingmask=new RegExp("^([0-9]{1}|[0-9]{1}-|[0-9]{1}-[A-Z]{1})$","i");
// todo: call maskAutoFill once for each mask delimeter
maskAutoFill(inputbox.value,inputbox,'1','-');
break;
} //end mask_type switch
//alert (""+usingmask);
// find current char position
//var position=inputbox.value.Length;
var myChar;
if (document.all) {
keyevent= window.event;
myChar = String.fromCharCode(keyevent.keyCode);
}
else{
if (document.layers){
myChar = String.fromCharCode(keyevent.which);
}
}
//var actual_char=inputbox.value.substring(postion,1);
var potential_text=inputbox.value+myChar;
if (!(potential_text.match(usingmask))) {
if (document.layers) //Firefox
{
//alert("firefox");
window.status="invalid key" ;
return false;
}
else if (document.all) //IE
{ //alert("IE");
window.status="invalid keystroke" ;
keyevent.returnValue = false }
}else{
window.status="" ;
}
}//end mask function
/* ***********************************************************************
*
* Function Name: maskAutoFill
*
* Author: toby.jones at putnam-fl.com
*
*
* Purpose: auto fill separator characters - intended to be used with maskKey()
* this automatically fills in separator chars like - () in (555)-666-777
*
* Arguments: str: initial string in the textbox. we will be changing the live one
* textox: 'this' special parameter for <input>
* mask_type: predefined mask type {clock,parcel ...}
* delim: int for exact allowed size
*
* Return Values: none
* Function calls: none
*
* *** For dates, use the gui date picker on G:, to automatically validate
* ***********************************************************************/
function maskAutoFill(str,textbox,loc,delim){
var locs = loc.split(',');
for (var i = 0; i <= locs.length; i++){
for (var k = 0; k <= str.length; k++){
if (k == locs[i]){
if (str.substring(k, k+1) != delim){
if (event.keyCode != 8){ //backspace
str = str.substring(0,k) + delim + str.substring(k,str.length);
}
}
}
}
}
textbox.value = str
}
/* ***********************************************************************
*
* Function Name: blurCheckLength
*
* Author: toby.jones at putnam-fl.com
*
*
* Purpose: length validation - intended to be used with maskKey()
* to validate final length on leaving the input box. A blank value
* will still be allowed to lose focus. This functin does not
* check for blanks on submit it checks length on blur only
*
* Arguments: inputbox : 'this' special parameter for <input>
* mask_type: predefined mask type {clock,parcel ...}
* custom_length: int for exact allowed size
*
* Return Values: none
* Function calls: none
*
* *** For dates, use the gui date picker on G:, to automatically validate
* ***********************************************************************/
function blurCheckLength(inputbox, mask_type, custom_length ){
if(inputbox.value.length > 0){
//alert("doing blurCheckLength");
var usinglength=1;
switch (mask_type){
case 'test':
//The test mask end target is: number dash alpha (9-Z will fit)
//usingmask=/^([0-9]{1}-[A-Z]{1}|[0-9]{1}-|[0-9]{1})$/i;
usinglength=3;
break;
case 'military_time':
usinglength=5;
break;
case 'date':
break;
case 'parcel':
usinglength=23;
break;
case 'phone':
break;
case 'custom' :
usinglength=custom_length;
break;
}
if(inputbox.value.length != usinglength){
// inputbox.focus();
//document.getElementById('statusdiv').innerHTML="Not valid -grab focus usinglength="+usinglength+"val.l="+inputbox.value.length;
window.status="Not valid: expected length="+usinglength+" given length="+inputbox.value.length;
//inputbox.bgcolor="yellow";
}else{
alert("is valid : ready to submit");
//form.submit(0)
}
}//en dif length > 0
}//end blurCheckLength()
/* ***********************************************************************
*
* Function Name: isNumeric
*
* Author: toby.jones at putnam-fl.com
*
*
* Purpose: figure it out
*
* Arguments: an expression to check
*
* Return Values: bool
* Function calls: none
*
*
* ***********************************************************************/
function isNumeric(sText)
{
var ValidChars = "0123456789";
var IsNumber=true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
// checkEntry dummy test function
function checkEntry(val) {
if (!val.match(/^[0-1]{1}[0-9]{1}:[0-5]{1}[0-9]{1} [A,P]{1}M$/i)) { alert('no good.');
return false;
} return true;
} //end function
// document.onkeypress = nospec;
</script>
<body>
<form>
<p>testmask</p>
[0-9]-[A-Z]: <textarea name="ta" id="ta" onKeyPress='return maskKey(event,this,"test",0)' onblur='blurCheckLength(this,"test",0)'></textarea>
<Button>submit></Button>
</form>
<hr>
<form onsubmit="return checkEntry(this.entry.value)">
<script> var mymask=/^[0-1]{1}[0-9]{1}:[0-5]{1}[0-9]{1} [A,P]{1}M$/i ;
</script>
military time:
<input type="text" name="entry" id="entry" onKeyPress='return maskKey(event,this,"military_time",0)' onblur='blurCheckLength(this,"military_time",0)' >
<p>
Parcel:
<input type="text" name="entry" id="entry" size=30 onKeyPress='return maskKey(event,this,"parcel",0)' onblur='blurCheckLength(this,"parcel",0)' >
<p><Button>submit></Button>
</form>
<!--END mask_functions.html -->