Validacion de formas no obtrusiva
Una de las cosas mas tediosas en el desarrollo web son las validaciones de formas en javascript. Son odiosas, aburridas y repetitivas.
Para hacer ese trabajo un poco mas sencillo me di a la tarea de crear una clase usando la libreria prototype.
Caracteristicas
- Facil de usar
- Funciona en multiples navegadores (por ahora funciona en explorer y firefox, pero debe funcionar en mas)
- Basada en expresiones regulares
- Extendible
Forma de uso
- Agregar las siguientes lineas en la cabecera de la pagina
<script type="text/javascript" xsrc="prototype.js" mce_src="prototype.js" > </script>
<script type="text/javascript" xsrc="validation.js" mce_src="validation.js" > </script>
<script type="text/javascript">
Event.observe(window,"load",function (){ new Validation('forma'); } ,true);
</script>
Sustituyendo las rutas para los archivos javascript en donde sea necesario. - Agregar el atributo id a la forma igual al parametro que se le pasa al constructor de validacion (en este caso, ‘forma’)
<form id='forma' action="" method="Post"> - Agregar class y alt para los campos que se quieran validar. Class definira la regla de validacion que se usara y alt el mensaje que se le presentara al usuario. Si no se incluye el atributo class, el elemento no se validar� y si no se incluye el atributo alt se presentar� un mensaje por default para esa regla (P. ej. “El campo x es requerido”)
<input type='text' class='required' alt='Este campo es obligatorio' value=" " />
Y listo, eso es todo 
Reglas de validacion incluidas
- required: El campo tiene que tener al menos un caracter
- digits: Permite solo numeros
- nonzero: Permite solo numeros diferentes de cero
- chars: Permite solamente caracteres entre a y z
- alpha: Es una combinacion entre digits y chars
- email: Permite emails validos (Si si, lo se, la validacion no es perfecta, conozco el regexp)
- date: Permite solo fechas en el formato “YYYY-MM-DD”
- empty: Si se pone como clase de un campo, este solo sera validado si se encuentra lleno, de lo contrario no se validara. Puede usarse en conjuncion de otra regla para hacer un campo opcional (ver ejemplos)
- dupe: Esta regla es un poco especial. Requiere que ademas se llene la propiedad title. Despues buscar� el campo cuyo ID sea igual al title. Comparara ambos campos y si son diferentes mandara error. Util por ejemplo para validar campos contrase�a.
Agregar nueva reglas
Para agregar nuevas reglas de validacion, basta con modificar el archivo validation.js, en la funcion initRules, agregando una nueva linea por cada regla. El formato de las reglas es:
a.push( new Rule(“NOMBRE”, REGEXP , “texto de alerta)” ) );
- NOMBRE es el nombre de la regla
- REGEXP es una expresion regular contra la que se validara el campo
- Texto de alerta es el texto por default para esa regla. Para insertar el nombre del campo se puede escribir XXXX y esto sera sustituido por el nombre del campo, por ejemplo: “El campo XXXX debe tener 5 caracteres de longitud”
Ejemplos:
Haz click aqui (abre en ventana nueva)
Bajar codigo fuente y ejemplo
Se aceptan sugerencias y comentarios
Si deseas contactarme puedes hacerlo en contacto@masio.com.mx o deja comentario en alguna de las entradas del blog. Tambien me encuentras en twitter en 
o deja comentario en alguna de las entradas del blog. Tambien me encuentras en twitter en
b3co
7 Sep, 2006
Est
luis.zaldivar
7 Sep, 2006
Las tomare en cuenta para la siguiente version, me gustan tus ideas.
Inclusive se podrian hacer opcionales, poner un flag de “validar al introducir” y “resaltar campos erroneos”
Gracias!
Juwe
7 Sep, 2006
Muy bueno, ah
g30rg3_x
7 Sep, 2006
Bueno es un buen punto para los desarrolladores web, pero para el campo de la seguridad informatica es muy malo, claro estoy considerando que solo del lado del cliente se estan haciendo los filtros, espero que no sea asi y del lado del servidor y del cliente se esta haciendo la validacion.
Saludos
luis.zaldivar
7 Sep, 2006
Estoy completamente de acuerdo contigo George. De hecho considero que las validaciones del lado del cliente JAMAS pueden considerarse elementos de seguridad. Solamente son elementos decorativos que ayudan al usuario a conducirse en un sistema. Por ejemplo “Si no escribes tu email, no poderemos hacerte llegar la informacion que solicitaste”.
Sin embargo son cosas que deben hacerse, ya sea por elementos decorativos como ya mencione o por peticion del jefe, cosa muy comun… Y son tediosas como ellas solas, por eso es que pense en hacernos la vida mas facil a todos.
Rondamon
20 Oct, 2006
Hola, intente descargar el archivo y parece no estar disponible, puedes arreglar el enlace?
un saludo
rondamon
Masiosare
20 Oct, 2006
Es cierto, gracias por el tip! No lo habia notado. Hice migracion del blog hace poco y no me di cuenta del error, ya esta corregido, muchas gracias!
Saludos.
Gustavo
18 Jan, 2007
El artÃculo esta un espectáculo , tengo nadamas un problemita, cuanto tengo un textarea y le pongo que sea required no me sale el mensaje de alt=”", por que puede ser??
Gracias por la ayuda
Juliana
19 Jan, 2007
Excelente forma de validar. Estaba buscando algo asÃ.
Gracias. buen trabajo.
Juliana.
Andrés Mirabal
1 Mar, 2007
Aqui dejo otra validacion, un que creé para aquellos formularios tipo factura, donde se debe agregar algún número con decimales:
a.push( new Rule(“numeric”, /^[0-9]*.([0123456789][0-9])+$/, “El campo XXXX debe ser un numero sin o con decimales” ) );
se pone esto en el archivo validation.js con las demas…..
Espero que sea útil para todos
babai
Andrés Mirabal
1 Mar, 2007
CORRIJO:
a.push( new Rule(“numeric”, /^\d+(\.\d{2})?$/, “El campo XXXX debe ser un numero sin o con decimales” ) );
Este es mas eficiente y en verdad trabaja como debe ser…
Masiosare
1 Mar, 2007
Excelente, gracias! PAra ser honestos, no le puse mucho afan a los regexps, se pueden mejorar mucho…
La siguiente “version” ya va a hacer validaciones mas complejas, cruzadas y tambien definidas por el usuario. Nada mas que tenga tiempo, porque honestamente no he tenido mucho. Igual si alguien quiere modificar el codigo, aviseme y lo publico aca.
Saludos.
Giorbis Miguel
23 Apr, 2007
Como podrÃa cambiar que sea en el atributo class de los elementos del formulario que se ponga la validacion.
Ese campo se usa mucho para los estilos y me gustarÃa ponerle uno que yo quisiera o al menos tener esa opcion.
Por ejemplo:
validacion=’required’
Saludos.
Masiosare
23 Apr, 2007
Ahhh! Esa es la magia del asunto
Es perfectamente valido poner mas de una clase al atributo, por ejemplo puedes usar
Y el validador usaria los dos primeros campos e ignoraria el tercero, el cual tu usarias para darle estilos
Inclusive puedes ir un poco mas alla, puedes definir las clases usadas por el validador y asi unirias los estilos y la validacion.
Por cierto, la proxima semana voy a liberar una nueva version, con los cambios que he necesitado. Es mas robusta y un poco mas limpia.
Y por cierto, agregar un campo validation=’required’ no es correcto. La mayoria de los navegadores no aceptan nuevos atributos arbitrarios. Por eso es que escogi el atributo class, ademas que es semanticamente mas correcto
cesar
22 Aug, 2007
Muy buenas tardes a todos, la verdad esta validación muy sencilla, pero me gustaria saber si hay alguna manera de modificar, cambiar o poder validar las fechas en castellano es de cir con formato: dd/mm/aaaa.
gracias a todos
Giovanny
30 Nov, 2007
BUENAS TARDES ESTE CODIGO JAVASCRIPT ES ESPECTACULAR…PERO NO ME RECONOCE ESTO EN LOS TEXTAREA….COMO DEBO CODIFICAR EL TEXTAREA PARA QUE ME FUNCIONE???
GRACIAS ESPERO REPSUESTA
Giovanny
3 Dec, 2007
BUENOS DIAS
MI PREGUNTA ES PARA EL TEXTAREA COMO PUEDO DARLE REGLAS DE VALIDACION…
GRACIAS…
Albino
17 Jun, 2008
Hola buen dia, esto programando en asp y javascriop, me piden que debo de subir un archivo del lado del cliente al servidor, pero que tenga que validar el nombre con uns cierto formato. El archivo debe de llevar el formato de “FUESEddmmyyyy.xls” dd = dia, mm = mes, yyyy = año, alguien como sabria como hacer eso, la validacion debe de ir a la hr en que cargo el archivo, pero eso lo quiero hacer con javascript para asi solo jalar el la funcion.
Saluods y gracias