Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f20 (09-08-2005)
// Format Number
// by Vic Phillips http://www.vicsjavascripts.org.uk
// Format a number, such as a phone number as required
// Application Notes
// The format is specified as a string
// and passed to the function 'f20_FormatNumber()' on the onkeyup event of a text box
// e.g.
// <input name="" size="10" value="Phone Number" onkeyup="javascript:f20_FormatNumber(this,'(~~~) ~~~~~~');" >
// The sting charactors '~' will be replaced by the numbers typed in the text box
// There can be any number of applications on a page each with a unique format
// All variable, function etc. names are prefixed with 'f20_' to minimise conflicts with other JavaScripts
// Customising Variables
var f20_TypingColor='blue';
var f20_CompleteColor='black';
var f20_WarningColor='RED';
// Functional Code
// NO NEED to Change
var f20_Temp,f20_Lgth,f20_Obj,f20_TO;
var f20_re=/\D/g;
var f20_re1=/~/g;
function f20_FormatNumber(f20_obj,f20_tem){
f20_obj.style.color=f20_TypingColor;
f20_re = /\D/g;
f20_obj.value=f20_obj.value.replace(f20_re,'');
f20_Temp=f20_tem;
for (f20_0=0;f20_0<f20_obj.value.length;f20_0++){
f20_Lgth=f20_Temp.indexOf('~');
f20_Temp=f20_Temp.replace('~',f20_obj.value.charAt(f20_0));
}
if (f20_obj.value.length>0&&(f20_Lgth<0||f20_obj.value.length==f20_tem.match(f20_re1).length)){
f20_obj.value=f20_Temp.substring(0,f20_tem.length);
f20_obj.style.color=f20_CompleteColor;
}
if (f20_Lgth>=0&&f20_obj.value.length>0){
f20_obj.value=f20_Temp.substring(0,f20_Lgth+1);
}
f20_obj.lgth=f20_tem.length;
f20_AddBlur(f20_obj);
f20_AddFocus(f20_obj);
}
function f20_Blur(){
f20_Obj=this;
f20_TO=setTimeout('f20_BlurDo()',200);
}
function f20_BlurDo(){
f20_Obj.style.color=f20_CompleteColor;
if (f20_Obj.value.length<f20_Obj.lgth){
if (f20_Obj.value.length<1){ f20_Obj.value='Please Complete'; }
f20_Obj.style.color=f20_WarningColor;
alert('Please Complete the\n '+f20_WarningColor+'\nField');
f20_Obj.focus();
}
}
function f20_Color(){
this.style.color=f20_TypingColor;
}
function f20_EventAdd(f20_o,f20_t,f20_f) {
if ( f20_o.addEventListener ){ f20_o.addEventListener(f20_t, function(e){ f20_o[f20_f](e);}, false); }
else if ( f20_o.attachEvent ){ f20_o.attachEvent('on'+f20_t,function(e){ f20_o[f20_f](e); }); }
else {
var f20_Prev=f20_o["on" + f20_t];
if (f20_Prev){ f20_o['on'+f20_t]=function(e){ f20_Prev(e); f20_o[f20_f](e); }; }
else { f20_o['on'+f20_t]=f20_o[f20_f]; }
}
}
function f20_AddBlur(f20_){
if (f20_.addblur){ return; }
f20_.addblur=f20_Blur;
f20_EventAdd(f20_,'blur','addblur');
}
function f20_AddFocus(f20_){
if (f20_.addfocus){ return; }
f20_.addfocus=f20_Color;
f20_EventAdd(f20_,'focus','addfocus');
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function DateValidate(obj){
val=obj.value
if (val.replace(/\s/g,'')==''){ return false; }
mmddyyyy=val.split('/');
Mess='';
if (mmddyyyy.length<3){
Mess+='Format must be mm/dd/yyy\n';
}
else {
if (mmddyyyy[0]<1||mmddyyyy[0]>12){
Mess+='Invalid Month\n';
}
if (mmddyyyy[1]<1||mmddyyyy[1]>31){
Mess+='Invalid Day\n';
}
if (mmddyyyy[2]<1000||mmddyyyy[2]>20000){
Mess+='Invalid Year\n';
}
if (Mess!=''){
Mess+='Format must be mm/dd/yyy';
}
}
if (Mess==''){
return true;
}
alert(Mess);
obj.focus();
return false;
}
//-->
</script></head>
<body>
with Format Number<br>
<input size=10 onkeyup="f20_FormatNumber(this,'~~/~~/~~~~');" onblur="DateValidate(this);">
<br>
<br>
without Format Number<br>
<input size=10 onblur="DateValidate(this);">
</body>
</html>
Posting Permissions
Bookmarks