Vanadium: Validación de formularios con JQuery

Recientemente he anunciado en el blog por medio de una pequeña anotación que había sido subsanado uno de los problemas que tenía la tienda online en Java EE. La tienda había sido dotada de un mecanismo para validar en el registro si un email estaba ocupado o no, pero esta función no llegó a funcionar (aunque sí estaba implementada) por razones que hasta hace poco desconocía.

Dicho esto, creo que una vez solucionado este problema podría ser un buen momento para que os hablara en profundidad de las validaciones realizadas en los formularios de la tienda en el lado del cliente.

Creo que sería una buena manera de empezar siendo sinceros y comentando que no soy ni un experto en JavaScript ni en JQuery, sin embargo si he aprendido a realizar la tarea que os voy a mostrar hoy a base de investigar bastante sobre el asunto concreto que esta vez nos atañe y de luchar para que aquello funcionara correctamente.

Cuando me dispuse a realizar las validaciones de la tienda online lo primero que busqué fue una solución rápida al problema, recordemos que se trataba en un principio de una práctica, y como tal, con una fecha de entrega; así que, lo que hice fue buscar alguna librería de JQuery que me solucionara el problema. Al realizar la búsqueda mi primer resultado fue Vanadium, y esa fue la que usé y la que os voy a explicar hoy aquí. Lo que, no quita que no haya otras librerías de validación.

Respecto a la librería que yo he utilizado llamada VanadiumJS cabe destacar la sencillez de su configuración además de que es fácilmente personalizable para adaptarla a nuestras necesidades. Vamos a ver como funciona.

Instalación

Para empezar, lo primero que haremos es explicar como hemos de configurar la librería e instalarla. Una buena manera de empezar sería crear un directorio en nuestra aplicación web para guardar archivos JavaScript. Y, en dicha carpeta tendríamos que guardar en primer lugar la librería de JQuery que podemos encontrar en su web y, después guardaríamos en ese mismo directorio la librería que vamos a usar que también la podeis descargar de la misma web de VanadiumJS.

Es importante colocar estas dos librerías de JavaScript debido a que Vanadium como era de esperar hace uso de JQuery.

Posteriormente, también deberíamos crear una carpeta para guardar hojas de estilos css, aunque posiblemente ya la hayamos creado para guardar nuestras propias hojas de estilos. Dentro de esta carpeta deberemos colocar una hoja de estilos como esta. Los estilos de esta hoja son los que serán aplicados a los formularios en caso de validación correcta o validación fallida.

Es una hoja de estilos sencilla de personalizar puesto que los nombres que llevan cada uno de los estilos son bastante intuitivos.

Finalmente toca hacer funcionar esto dentro de nuestros ficheros html estáticos o jsp u otros lenguajes. Esto será tan sencillo como importar todos estos archivos que hemos usado en la cabecera de cada fichero en la que lo queramos usar. Si esto nos resulta incómodo en el caso de jsp siempre podríamos hacer uso de la etiqueta import para no tener que poner estas líneas en todos los ficheros en los que se use.

Validación en formularios

En este apartado aprenderemos a llamar a esta librería para que haga las validaciones pertinentes en cada campo del formulario.

Vanadium usa el atributo class de los elementos de los formularios para que en él se escriban los ajustes que sean necesarios. Veamos un ejemplo sencillo con el que se validaría un campo de texto en el que se espera un e-mail.

Se puede observar que hay un símbolo de dos puntos (:) al principio de cada ajuste. En este caso estaríamos indicando que se realizara una validación según la expresión regular de un email. Si hacemos la prueba de este código veremos que realiza la validación por cada evento que ocurre en la caja de texto, si no queremos este comportamiento se puede cambiar para que lo realice pasado un tiempo después de un evento o para que lo realice sólo cuando el campo se abandone (terminar de escribir y pasar al siguiente campo).

Otro aspecto importante es que en el ejemplo anterior se podría no escribir nada en la caja de texto y pasar la validación sin problemas, si se quiere que esto sea un campo requerido habría que usar otro ajuste. Veamos ahora un ejemplo más complejo.

NOTA: En los códigos hay un espacio sobrante entre los dos puntos (:) y la o de “only_on_blur” debido a que se cambiaba por su correspondiente emoticono.

También es posible la validación de otro tipo de campos a parte de el email que va vienen implementados por defecto con la librería. Podemos encontrar en la página web del proyecto una lista de las posibilidades admitidas. Todos los ajustes que necesiten de un valor se indicará con el punto y coma (;) y después el valor, como se ha visto para el caso de wait.

Veamos por ejemplo como validar un campo típico en el que se pide que repitas la contraseña, para comprobar que has escrito lo mismo en los dos lugares.

Personalizar los mensajes de error

Puesto que es una librería escrita en inglés es de suponer que los mensajes de error que se produzcan cuando falle la validación esten en inglés, pero no hay problema, lo podemos cambiar. Para ello deberemos abrir el fichero JavaScript de Vanadium que hemos guardado en la carpeta de scripts, y luego nos dirigiremos a la línea 1012 aproximadamente.

Podremos ver estructuras repetitivas que llevan la expresión regular con la que se ha de validar, un nombre y un mensaje de error. Mostremos una de ejemplo.

Ahora si lo que queremos es que el mensaje se muestre en español sería tan sencillo como traducir el mensaje.

Como podemos ver es una tarea bastante sencilla.

Personalizar los tipos de validaciones

En este apartado veremos que también es posible añadir otros tipos de validaciones aparte de las que ya vienen implementadas por defecto con la librería, por ejemplo sería interesante una validación para direcciones postales.

Para esto nos situaremos en la zona del fichero JavaScript de Vanadium, aproximadamente por la línea 1012 y solo tendremos que repetir la estructura que ya hemos comentado en el apartado anterior pero personalizándola según nuestras necesidades. Mostraremos un ejemplo para validar una dirección de email; como se puede ver bastará con adaptar una expresión regular y personalizar nuestro mensaje.

Y posteriormente, en los formularios, bastará con usar el nombre que se le ha dado a la validación, en este caso ‘dir’.

También se pueden hacer cosas más complejas como se puede ver en líneas inferiores siguiendo la misma estructura.

Actualización (19 de Octubre de 2012)

Por añadir un ejemplo más podemos hacer una validación de un DNI, y su correspondiente letra. Así puedo ilustrar que dentro de la misma estructura podemos hacer las operaciones que queramos para hacer una validación.

En este ejemplo lo que mete el usuario se guarda en la variable v y con ello como se puede ver podemos hacer las operaciones que queramos. Como se puede entender en el ejemplo por un lado se comprueba que sigue el formato de un DNI y en segundo lugar que la letra sea correcta usando el algoritmo que se puede ver (no lo he inventado yo ;-) ). La clave está en que al final se validan las dos condiciones unidas por un AND que se simboliza con &&.

De la misma forma que hemos hecho esto podríamos por ejemplo validar una fecha para que una persona se mayor de 18 años o cosas similares. Habría que hacer dentro de la estructura una resta de fechas y por otra parte validar que el formato de la fecha sea el correcto. Este enlace sobre fechas en JavaScript y este otro para comparar fechas  podrían servir para hacer esta tarea.

Validación usando la lógica del servidor por medio de AJAX y JSON

En ocasiones no se pueden realizar todas las validaciones por medio del cliente, a veces se necesitan datos que solo se pueden obtener del servidor. El típico ejemplo de esto sería comprobar si una dirección de email ha sido ya usada anteriormente o no. Para este tipo de validaciones lo que se suele hacer es usar AJAX para realizar peticiones al servidor.

En el caso concreto de Vanadium nos va a permitir realizar una petición AJAX a la dirección que deseemos y el esperará un objeto JSON como respuesta a dicha petición que indique si la validación ha sido correcta o no.

Lo primero que haremos será preparar un Servlet Java EE preparado para recibir peticiones en un determinado patrón de url personalizando este ajuste en el descriptor de despliegue.

Posteriormente en la implementación del Servlet lo primero que haremos es definir el tipo de respuesta como un objeto JSON y posteriormente abriremos el flujo de salida en el que escribiremos el JSON que espera Vanadium, que será como este que podemos observar en la web del proyecto. Como vemos primero se indica si la validación fue válida y posteriormente un mensaje para mostrar en caso de error en la validación.

mostremos ahora el código de un servlet sencillo que siempre devolverá la misma respuesta. Por supuesto hay que tener en cuenta que las escrituras en el flujo de salida deberían de ir en un try y realizar el cierre de la misma en un bloque finally. Como se puede observar simplemente se va construyendo el objeto JSON en el flujo de salida. Este Servlet en realidad no hace nada pero sería tan sencillo como devolver una u otra respuesta dependiendo de ciertas condiciones; que en nuestro ejemplo concreto sería comprobar si una dirección de email está usada o no.

Ahora habrá que configurar el campo del formulario que se desea validar al estilo de como se ha hecho en los ejemplos anteriores. Habrá que usar la opción ajax y después del punto y coma (;) habrá que indicar la dirección a la que se quiere realizar la petición. Veamos el ejemplo concreto.

Como vemos la directiva es bastante sencilla, simplemente se indica que se quiere hacer una validación vía AJAX y la dirección a la que se quiere hacer la petición, y como vemos es perfectamente combinable con cualquiera de las opciones ya vistas en apartados anteriores.


Pues hasta aquí con este tutorial sobre el uso de la librería Vanadium para realizar validaciones de formularios en el lado del cliente usando JavaScript y JQuery. Comentar también que en la misma página de Vanadium es posible encontrar más ejemplos.

Actualización (19 de Octubre de 2012)

A esta fecha de la actualización parece que la página oficial de la librería ha dejado de existir, en un principio parecía que el desarrollador iba a publicar un segunda versión pero parece que el proyecto ha sido abandonado. Yo no tengo ningún problema en seguir resolviendo las dudas que yo pueda. Pero mi recomendación es que usemos librerías actuales. Hay muchas, a mi me ha dado rabia porque esto estaba bastante bien hecho y era muy fácil de usar, pero hay que adaptarse a los cambios :)

Espero que os haya sido útil este tutorial y mi parte nada más que decir; solamente deciros como siempre que están los comentarios a vuestra entera disposición para cualquier duda o sugerencia.


17 Comentarios

  1. Sergio

    Lástima que desaparezca, es un plugin que llevaba utilizando tiempo por lo que en muchos casos no puedo cambiar, una pregunta como podría validar por este sistema la extesión de una imagen que se va a subir?

    Por cierto por aquí también hace tiempo que dejó de subir nada nuevo, :(
    https://github.com/lambder/Vanadium

    Un saludo

    • Hola Sergio:

      Si, es una pena, era un buen plugin, pero el autor dijo que iba a hacer una v2 y de repente parece que desapareció. Pero bueno, hay muchos de este tipo, pero lo cierto es que este era bastante fácil de aprender y personalizar.

      Respecto a lo de la extensión de archivo lo puedes hacer con una expresión regular o mira haber si Javascript tiene funciones de tipo endsWith() que seguramente tendra.

      Saludos

  2. Fabian

    Hola, hace un par de meses estoy utilizando el plugin Vanadium para validar mis formularios, y leyendo los comentarios me encontre con que alguien esta desarrollando una v.2.0, me gustaria saber como va el proceso…Y si es posible obtener esta nueva version.

    • Hola Fabian:

      El que comentó eso fue el propio creador del plugin pero me temo que la cosa no ha sido así. Como puedes ver en el post he puesto que parece que ya no esta el plugin, la web ya no funciona, parece que ha sido discontinuado. Lo siento.

      Un saludo

  3. Como le hago para que vanadium me muestre el total de un numero sumado, por ejemplo si coloco en mi formulario cuanto es 3+4 y dependiendo de la respuesta permita la validación.

    • Tienes que obtener la cadena que introduce el usuario y validarla, fíjate en el ejemplo del DNI.

      El ejemplo del DNI es muy bueno porque tu solo tendrías que sustituir la lógica del DNI por lo tuyo. No se mucho JavaScript pero creo que sería algo parecido a esto: return v==7

      Un saludo!

  4. La dirección de vanadiumjs ya no muestra nada

    • Hola:

      Lo siento Jose, pero como puse en la actualización parece que el autor ha discontinuado el plugin. La verdad es que es una pena porque funcionaba muy bien.

      Saludos!

  5. nicolas

    Hola, como haces para validar el año de nacimiento?? Que solo permita si es mayo de 18 años. Gracias

    • Hola Nicolás:

      Es fácil modificar el código de la librería como expliqué en el artículo, hace poco yo hice la validación de la letra del DNI con la misma librería.

      Lo que tendrías que hacer sería añadir o modificar una de las validaciones que hay, y en primer lugar hacer una comprobación del formato de la fecha y luego tendrías que restar la fecha actual menos la fecha que haya introducido el usuario para ver si es mayor de 18 años, esto lo tendrías que hacer en el mismo sitio. Luego a la hora de hacer el return puedes hacer un AND ‘&&’ entre la condición del formato de fecha y la condición de la edad. Sigue el mismo formato de return de los que ya hay y pones el mensaje de error que quieras.

      Espero que con esto te valga, en caso contrario intento echarte una mano :)

      Un saludo!

    • Nicolas

      Uh me mataste, recien me estoy iniciando……si pudieras aclararme un poco mas te agradeceria…..

    • Dame de plazo a lo largo de esta semana que tengo mucho lio :)

    • He actualizado el artículo con cosas que creo que pueden resolver tus dudas :) Ya me contarás si has logrado solucionar el problema.

      Un saludo!

    • nicolas

      Uhh…lo borraron…que pena…..

    • Sin duda una pena Nicolás, pero como digo aunque esté borrada si hay problemas con ella yo voy a seguir resolviendo las dudas en la medida en que pueda. Y como ves tu pregunta la intenté dejar resuelta :)

      Un saludo!

  6. Hi Juan,

    Thank you for the tutorial. I’m just in the proces of finishing my VanadiumJs v. 2.0 and I’m building new website for it with more examples. Would you be interested of translating the new Vanadium website into spanish?


    Regards,
    Daniel (author of VanadiumJS)

    • Very good news to hear that you are working on the new version of VanadiumJS. It is a very good plugin with many possibilities.

      Yes, i don’t have any problem translating the new website.

      Regards!

Trackbacks/Pingbacks

  1. Bitacoras.com - Información Bitacoras.com...Valora en Bitacoras.com: Recientemente he anunciado en el blog por medio de una pequeña anotación que había sido subsanado …

Deja un comentario