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

  1. 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.
  2. 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">
  3. 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

  1. required: El campo tiene que tener al menos un caracter
  2. digits: Permite solo numeros
  3. nonzero: Permite solo numeros diferentes de cero
  4. chars: Permite solamente caracteres entre a y z
  5. alpha: Es una combinacion entre digits y chars
  6. email: Permite emails validos (Si si, lo se, la validacion no es perfecta, conozco el regexp)
  7. date: Permite solo fechas en el formato “YYYY-MM-DD”
  8. 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)
  9. 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

validation.zip

Se aceptan sugerencias y comentarios

20 thoughts on “Validacion de formas no obtrusiva

  1. Pingback: www.enchilame.com

  2. luis.zaldivar

    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!

    Reply
  3. g30rg3_x

    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

    Reply
  4. luis.zaldivar

    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. 🙂

    Reply
  5. Pingback: meneame.net

  6. Masiosare

    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.

    Reply
  7. Gustavo

    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

    Reply
  8. Andrés Mirabal

    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

    Reply
  9. Andrés Mirabal

    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…

    Reply
  10. Masiosare

    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.

    Reply
  11. Giorbis Miguel

    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.

    Reply
  12. Masiosare

    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 🙂

    Reply
  13. cesar

    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

    Reply
  14. Giovanny

    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

    Reply
  15. Albino

    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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *