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.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Login</title>

    <script type="text/javascript" src="/scripts/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="/scripts/vanadium.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/validacion.css" media="screen, tv, projection" />
</head>

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.

<input id="email" name="email" type="text" class=":email"/>

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.

<!--
email:validar email
required: campo obligatorio
only_on_blur: validar solo al abandonar el campo
-->
<input id="email" name="email" type="text" class=":email :required : only_on_blur"/>

<!--
wait;ms   Esperar una cantidad de milisegundos después de un evento para validar
-->
<input id="email" name="email" type="text" class=":email :required :wait;500"/>

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.

Contraseña
<input id="pass" name="pass" type="password" class=":password :required : only_on_blur"/>

<!--
Se usa el id del elemento que se quiere comprobar que es igual
-->
Reescriba la contraseña por seguridad<br />
<input name="repeatPass" type="password" class=":same_as;pass :required : only_on_blur"/>

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.

['asciialpha', function (v) {
    return Vanadium.validators_types['empty'].test(v) || /^[a-zA-Z]+$/.test(v)   //% C0 - FF (� - �); 100 - 17E (? - ?); 391 - 3D6 (? - ?)
}, 'Please use ASCII letters only (a-z) in this field.'],

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

['asciialpha', function (v) {
    return Vanadium.validators_types['empty'].test(v) || /^[a-zA-Z]+$/.test(v)   //% C0 - FF (� - �); 100 - 17E (? - ?); 391 - 3D6 (? - ?)
}, 'Por favor, use solo caracteres ASCII (a-z) en este campo'],

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.

['dir', function (v) {
    return Vanadium.validators_types['empty'].test(v) || /^[a-zA-Z0-9 \,\º\-\u00C0-\u00FF\u0100-\u017E\u0391-\u03D6]+\ [0-9]{5}-[a-zA-Z \-\u00C0-\u00FF\u0100-\u017E\u0391-\u03D6]+$/.test(v)   //% C0 - FF (� - �); 100 - 17E (? - ?); 391 - 3D6 (? - ?)
}, 'Introduzca una dirección válida'],

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

<input name="dir" type="text" class=":dir :required : only_on_blur"/>

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.

['DNI', function (v) {
            var lockup = 'TRWAGMYFPDXBNJZSQVHLCKE';

            var letraUsuario=v.substring(8).toUpperCase();
            var modulo=v.substring(0,8)%23;
            var letraCorrecta=lockup.charAt(modulo);
            var ok=false;
            if(letraCorrecta==letraUsuario) ok=true;
            return ok&&(Vanadium.validators_types['empty'].test(v) || /^[0-9]{8}[A-Za-z]{1}$/.test(v))   //% C0 - FF (� - �); 100 - 17E (? - ?); 391 - 3D6 (? - ?)

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.

<servlet>
    <servlet-name>CheckEmailServlet</servlet-name>
    <servlet-class>control.CheckEmailServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckEmailServlet</servlet-name>
    <url-pattern>/checkmail</url-pattern>
</servlet-mapping>

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.

{
  success: true,
  message: "The username is free."
}

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.

response.setContentType("application/x-json;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println ("{");
out.println("\"success\": false,");
out.println("\"message\": \"Dirección de email no disponible\"");
out.println("}");
out.close();

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.

<input id="email" name="email" type="text" class=":email :required :ajax;/checkmail : only_on_blur"/>

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.

Centro de preferencias de privacidad

Cookies imprescindibles

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

gdpr

Advertising

Analytics

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

_gid,_gat,_ga
1P_JAR, CONSENT, NID, OGPC
disqus_unique, disqusauth

Pin It on Pinterest

Share This