Objeto Javascript para controlar objetos INPUT

Trabajamos a diario, los que diseñamos páginas web, con formularios de entrada de datos, mayormente conformados por objetos INPUT. Estos requieren, muchas veces, de validaciones estándares que, si bien podemos hacerlas en el servidor, se ahorra mucho tiempo el hacerlas en el servidor.

Este objeto que les comparto, hace una serie de validaciones para distintos tipos de entradas de datos, algunas de ellas teniendo en cuenta a algunos caracteres "indigestos" para las bases de datos enalgunas circunstancias. Valida:

• NUMBER: que la entrada sea un valor numérico, entero o decimal, positivo o negativo, con determinada cantidad de decimales, etc.
• DATE: que la entrada sea una fecha válida. Solo acepta fechas en formato dd/mm/aaaa.
• TEXTONLY: solo caracteres de la A-Z (sin los hispánicos, salvo que se establezca lo contrario).
• TEXTNUMBER: caracteres de la A-Z, números de 0-9 y el espacio en blanco. (sin los hispánicos, salvo que se establezca lo contrario).
• ALPHA: caracteres de la A-Z y algunos símbolos. (sin los hispánicos, salvo que se establezca lo contrario).
• ALPHANUMERIC: caracteres de la A-Z, números de 0-9 y algunos símbolos. (sin los hispánicos, salvo que se establezca lo contrario).

El código:

var __jgWC = {
   Version: '0.2.0 RC',
   //objetos controlados
   ControledObjects: [],
   //determinador del browser
   Browser: {
       IE:     !!(window.attachEvent && !window.opera),
       Opera:  !!window.opera,
       WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
       Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
       MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
   },
   //controla los atributos del objeto input
   DefaultAttributes:function(obj) {
       if(!obj.getAttribute('inputtype')) obj.setAttribute('inputtype', 'all');
       if(!obj.getAttribute('texttransform')) obj.setAttribute('texttransform', 'none');
       if(!obj.getAttribute('positiveonly')) obj.setAttribute('positiveonly', 'false');
       if(!obj.getAttribute('decimalpoint')) obj.setAttribute('decimalpoint', '.');
       if(!obj.getAttribute('decimalplaces')) obj.setAttribute('decimalplaces', '2')
       if(!obj.getAttribute('excludechar')) obj.setAttribute('excludechar', '');
       if(!obj.getAttribute('includecharonly')) obj.setAttribute('includecharonly', '');
       if(!obj.getAttribute('spanishchars')) obj.setAttribute('spanishchars', 'false');
       if(!obj.getAttribute('valMin')) obj.setAttribute('valMin', '');
       if(!obj.getAttribute('valMax')) obj.setAttribute('valMax', '');
       if(!obj.getAttribute('blurErrorAlert')) obj.setAttribute('blurErrorAlert', 'true');
       if(!obj.getAttribute('blurErrorMessage')) obj.setAttribute('blurErrorMessage', 'DATOS INCORRECTOS');
   },
   //registrador de los eventos de los inputs controlados
   RegisterObject:function(ob, enableEvents) {
       if(typeof ob == 'string') { ob=document.getElementById(ob); }
       if(arguments.length == 1) {enableEvents=true;}
       if(!ob) { return false;}
       this.ControledObjects.push(ob);
       this.DefaultAttributes(ob);
       if(enableEvents) {
           this.AttachEvent(ob, 'keypress', __jgWC_DoKeyPress, false);
           this.AttachEvent(ob, 'blur', __jgWC_DoBlur, false);
       }
       return true;
   },

   //agregador de los eventos
   AttachEvent:function(elemento, nombre_evento, funcion, captura) {
     if (elemento.attachEvent){
       elemento.attachEvent('on' + nombre_evento, funcion);
       return true;
     }else
       if (elemento.addEventListener){
         elemento.addEventListener(nombre_evento, funcion, captura);
         return true;
       }else {
         return false;
       }
   },

   //cancela la ultima entrada
   CancelInput:function(ev) {
       if(this.Browser.IE)
       {
           ev.keyCode = 0;
           ev.returnValue = 0;
       }else{
           ev.preventDefault();
           ev.stopPropagation();
       }
   },

   //detiene el burbujeo del evento
   StopBubble:function(ev) {
       if (__jgWC.Browser.IE) {
           ev.cancelBubble = true;
       }else{
           ev.stopPropagation();
       }
   },

   //evaluador de los dígitos ingresados
   EvaluateValue:function(obj, kcASCII, eventType)
   {
       kcASCII = (arguments.length==1) ?'':kcASCII;
       var value = obj.value + kcASCII;
       // excludechar
       var exChar = obj.getAttribute('excludechar');
       if(exChar.length > 0) {
           return ( RegExp('^[^' + exChar + ']*$', 'i').test(value));
       }
       // includeonly
       var inOnly = obj.getAttribute('includecharonly');
       if(inOnly.length > 0) {
           return (RegExp('^[' + inOnly + ']*$', 'i').test(value));
       }
       // todo tipo de caracteres
       if(obj.getAttribute('INPUTTYPE').toUpperCase() == 'ALL') { return true; }

       switch(obj.getAttribute('INPUTTYPE').toUpperCase()) {
           // tipo numerico
           case 'NUMBER':
               return this.NumericValue(obj, value);
               break;
           //tipo fecha
           case 'DATE':
               if(eventType == 'keypress') { return true; }
               return this.DateValue(obj, value);
               break;
           //solo texto
           case 'TEXTONLY':
               return this.TextOnlyValue(obj, value);
               break;
           //solo texto y numeros
           case 'TEXTNUMBER':
               return this.TextNumberValue(obj, value);
               break;
           //texto y algunos caracteres de puntuacion
           case 'ALPHA':
               return this.AlphaValue(obj, value);
               break;
           //texto, numeros y algunos caracteres de puntuacion
           case 'ALPHANUMERIC':
               return this.AlphaNumericValue(obj, value);
               break;
       }
       return true;
   },

   //muestra el mensaje de error establecido si se seteo el permiso para mostrarlo
   ErrorMessage:function(obj) {
       if(obj.getAttribute('blurErrorAlert') == 'true') {
           alert(obj.getAttribute('blurErrorMessage'));
           obj.select();
           obj.focus();
       }
   }
};

//agrega caracteres hispanicos a la expresion regular
__jgWC.addSpanishChars=function(obj, alpha) {
       return (obj.getAttribute('SPANISHCHARS').toLowerCase()=='true')?'áéíóúüñ' + ((alpha)?'¿¡':'') :'';
   }

//agrega simbolos a la expresion regular    
__jgWC.addSimbols=function(obj) {
       return ':\\?\\!\\$%=/*#<>\\+->,;\\(\\)\\.@_';
   }

//testea el valor ALPHANUMERIC
__jgWC.AlphaNumericValue=function(obj, valToTest) {
       var Exp = '^[a-z0-9\s' + this.addSpanishChars(obj, true) + this.addSimbols(obj) + ']*$';
       return RegExp(Exp).test(valToTest.toLowerCase());
   }

//testea el valor ALPHA
__jgWC.AlphaValue=function(obj, valToTest) {
       var Exp = '^[a-z\s' + this.addSpanishChars(obj, true) + this.addSimbols(obj) + ']*$';
       return RegExp(Exp).test(valToTest.toLowerCase());
   }

//testea el valor TEXTNUMBER
__jgWC.TextNumberValue=function(obj, valToTest) {
       var Exp = '^[a-z0-9\s' + this.addSpanishChars(obj, false) + ']*$';
       return RegExp(Exp).test(valToTest.toLowerCase());
   }

//testea el valor TEXTONLY
__jgWC.TextOnlyValue=function(obj, valToTest) {
       var Exp = '^[a-z\s' + this.addSpanishChars(obj) + ']*$';
       return RegExp(Exp).test(valToTest.toLowerCase());
   }

//testea el valor NUMERIC
__jgWC.NumericValue=function(obj, valToTest) {
       var Exp = '^';
       if(obj.getAttribute('positiveonly').toLowerCase()=='false') {
           Exp += '[-]?';
       }
       Exp += '\\d{1,1}\\d*';
       if(Number(obj.getAttribute('decimalplaces')) > 0) {
           Exp += '\\' + obj.getAttribute('decimalpoint') + '?\\d{0,' + obj.getAttribute('decimalplaces') + '}';
       }
       Exp += '$'; 
       return RegExp(Exp).test(valToTest);
   }

//transforma el texto segun el atributo TEXTTRANSFORM
__jgWC.TextTransform=function(obj) {
       switch(obj.getAttribute('TEXTTRANSFORM').toUpperCase()) {
           case "UPPER":
               obj.value = obj.value.toUpperCase();
               break;
           case "LOWER":
               obj.value = obj.value.toLowerCase();
               break;
       }
   }
 

//controla el valor DATE
__jgWC.DateValue=function(obj, valToTest) {
       var expr='^(([0-2]?\\d{1})|([3][0,1]{1}))\/[0,1]?\\d{1}[0-2]\/[1-9]{1}\\d{3}$';
       if( ! RegExp(expr).test(valToTest) ) { return false;};
       var aD = valToTest.split('/');
       var tmp = new Date(aD[2], aD[1]-1, aD[0]);
       if(Number(tmp.getDate()) != Number(aD[0]) || Number(tmp.getMonth()+1) != Number(aD[1]) ||
               Number(tmp.getFullYear()) != Number(aD[2]) ) {
           return false;
       }
       return true;
   }


//controla los objetos indicados en ControledObjects uno por uno
function __jgWC_ControlObjects() {
   var objs = __jgWC.ControledObjects;
   var len = objs.length;
   for(var i=0; i < len; i++) {
       var obj = objs[i];
       if( !__jgWC.EvaluateValue(obj) ) {
           __jgWC.ErrorMessage(obj);
           return false;
       }
   }
   return true;
}


//controla el evento KeyPress
function __jgWC_DoKeyPress(ev) {
   var obj = ev.target||ev.srcElement;
   var KC = ev.which||ev.keyCode;
   var kcASCII = String.fromCharCode(KC);
   var noChar = ev.keyCode;
   __jgWC.StopBubble(ev);
   if(__jgWC.Browser.IE) {
       if (document.selection.type == 'Text')    {
           var tr = document.selection.createRange();
           tr.text = '';
       }
   }else {
       if(obj.selectionStart < obj.selectionEnd) {
           if(String(noChar).search('37|39') == -1) {
               try {
                   window.getSelection().collapseToStart()
               }catch(ex){ }
           }
       }
   }
   if( ev.ctrlKey || ev.altKey ) {
       if(kcASCII.search('V|v|C|c|X|x') > -1) {
           return true;
       }
       __jgWC.CancelInput(ev);
       return false;
   }

   // backspace|tab|enter|Alt-flecha izq|Alt fecha der.
   if(String(noChar).search('8|9|13|37|39') > -1) {return true;}
   //evaluate
   if( !__jgWC.EvaluateValue(obj, kcASCII, ev.type) ) {
       __jgWC.CancelInput(ev);
       return false;
   }
}


//controla el evento blur
function __jgWC_DoBlur(ev) {
   var obj = ev.target||ev.srcElement;
   //evaluate
   if( !__jgWC.EvaluateValue(obj) ) {
       __jgWC.ErrorMessage(obj);
       return false;
   }
   __jgWC.TextTransform(obj);
   return true;
}

Las propiedades que acepta cada INPUT son:

• INPUTTYPE: indica que tipo de dato hay que controlar: NUMERIC, DATE, TEXTONLY, TEXTNUMBER, ALPHA, ALPHANUMERIC, ALL.
• TEXTTRANSFORM: acepta los valores UPPER, LOWER o NONE, para indicar si se debe transformar el texto a mayúsculas, minúsculas o sin cambios, respectivamente.
• POSITIVEONLY: funciona en combinación con NUMERIC y acepta el valor TRUE o FALSE. Indica si el valor númerico será solo positivo o no.
• DECIMALPOINT: funciona en combinación con NUMERIC, para establecer el punto decimal que se ha de aceptar. Por omisión se acepta el punto.
• DECIMALPLACES: funciona en combinación con NUMERIC y determina el número de decimales que se haceptarán. Por omisión se aceptan 2.
• EXCLUDECHAR: acepta una lista de caracteres que no serán aceptados en la entrada de datos.
• INCLUDECHARONLY: acepta una lista de caracteres que serán los únicos aceptados.
• SPANISHCHARS: acepta el valor TRUE o FALSE e indica si se han de aceptar los caracters españoles áéíóúñ en la entrada de datos.
• VALMIN: funciona en combinación con NUMERIC y establece el valor mínimo que se ha de aceptar.