Formularios en HTML5 con tooltips y jQuery validate

No escribo muy a menudo por el blog de ADWE (pero tampoco lo hago en el mío), pero en este caso quiero compartir un pequeño post sobre como mejorar el aspecto de nuestros formularios agregando funcionalidades como un plugin de validación y unos tooltips (textos de ayuda) personalizados, sin depender de un plugin externo para el tooltip y utilizando características avanzadas que nos trae el lenguaje conocido como «destructor de Flash», que no es otro que HTML5.

Vamos a tener en cuenta varios aspectos que me han llevado a realizar esta demo para ver porqué nos complicamos la vida adaptando el CSS a nuestras necesidades.

Partiendo básicamente de una maquetación adaptativa (responsive), nuestro formulario puede presentar sus elementos dentro de lo que conocemos como un GRID, es decir, una serie de columnas que «flotan» mágicamente para adaptarse al ancho de la pantalla o de su contenedor, por lo que necesitamos, pero sin marcarlo en nuestro CSS, que los elementos no se estén moviendo por la pantalla si debemos, ya sea por validación o por texto de ayuda, darle algún mensaje a nuestro visitante.

Si usamos jQuery Validation plugin (que me parece de lejos el mejor plugin de validación de formularios que existe, totalmente personalizable, con opción de crearle métodos propios -ya he creado unos cuantos en mi blog-, que cuenta, además, con constante actualización y soporte para versiones de jQuery), tenemos la parte de la validación resuelta. Y tú me dirás… ¿Y por qué usas un plugin escrito en javascript cuando HTML5 permite validar formularios de forma nativa? Y yo te diré, porque si bien HTML5 mola, a día de hoy no se puede usar en su totalidad, gracias a Microsoft y sus tropecientas versiones de Internet Explorer.

Y si tu próxima pregunta es que para qué quieres usar un tooltip si HTML5 trae el muy útil atributo «placeholder» en los campos de formularios, además de mandarte a leer el párrafo anterior, te diré que hay elementos como los CHECKBOXES, los RADIO BUTTONS, los SELECTS, entre otros, que no permiten mostrar un placeholder… por lo que el tooltip vuelve a ser la solución perfecta.

Pero bueno, que ya está bien de introducciones y de autopreguntas y autorespuestas. Vamos al código, que es a lo que hemos venido 🙂

Comenzando con una declaración básica de un formulario en HTML, como puede ser la siguiente:

[cc]

Texto de ayuda en formularios y validación en contenedor con jQuery y Validation.




[/cc]

Vamos a ver que dentro de nuestro FIELDSET (en este caso tendremos uno, pero nada quita que agrupes tus campos como te sea conveniente), vamos a presentar los elementos dentro de un DIV contenedor tal como:

[cc]


[/cc]

Si nos vamos al CSS creado hasta aquí, veremos que lo único realmente importante de nuestro código es el position:relative que debe tener cada DIV, ya veremos el porqué…

[cc]div {clear:both;padding:0 0 20px 0;position:relative}[/cc]

Esta posición relativa que aplicamos a los DIVs nos permitirá posicionar elementos internos de forma absoluta, asegurándonos que las posiciones de TOP, LEFT, RIGHT y BOTTOM que podamos necesitar se calculen en el navegador teniendo en base los límites del DIV contenedor y no el viewport de la pantalla.

Seguimos, a continuación, presentando la totalidad de los campos de nuestro formulario y vamos a comenzar a poner los textos de ayuda para cada uno de los datos que necesitamos cubrir de nuestro formulario.

[cc]

[/cc]Debemos tener en cuenta que un tooltip debe ser un texto complementario y nunca debe ser un texto de obligada lectura para el usuario ya que siempre correremos con el riesgo de que nuestro usuario no tenga javascript activado con lo que no podrá ver el mensaje que queremos darle. En este caso, siempre es mejor usar otros atributos, como el TITLE en el campo del formulario.

Ya sé que es casi improbable que, a día de hoy, un usuario no tenga javascript activado en su navegador, pero como hay usuarios que creen que la NSA les lee su correo personal, también habrá gente que habrá oído que javascript es el demonio y lo tendrá desactivado… 🙂

Pues bien, en este caso del ejemplo, nuestro formulario quiere presentar textos de ayuda, no requeridos para el usuario y, sobre todo, queriendo cuidar su estética (ya sabemos todos lo feo que son los elementos nativos de los navegadores, como los alert, los title, etc.), para todo ello, vamos a aplicar unas pocas líneas de CSS, viendo que todo es personalizable, que no dependeremos de imágenes (en este caso el mensaje tiene forma de globo de diálogo con una flecha indicativa) y que es muy, pero muy fácil de adaptar a tus necesidades.

Mediante javascript, en pocas líneas también, posicionaremos este elemento a la derecha de nuestro LABEL, apareciendo al posicionar el ratón por encima de nuestro DIV contenedor y ocultándolo al mover el ratón fuera del área del DIV correspondiente.

Para los mensajes de validación, tenemos otra opción preparada y es agrupar los mismo en un div contenedor para que nos salgan uno debajo de otro (dentro de una lista desordenada -UL-), con lo que conseguiremos, nuevamente, no alterar la maquetación del formulario.

[cc]

[/cc]

Pero este post tiene un bonus track… He comentado más arriba que jQuery Validation tiene la facilidad de poder crear métodos propios de validación de un modo muy sencillo. En nuestro caso, vamos a agregar un muy sencillo código antispam que consiste en generar por javascript un número aleatorio, escribirlo dentro de un SPAN y crear el método ANTISPAM en nuestro Validate. Para ello nos basamos en el siguiente código:

[cc]

function randomgen()
{
var rannumber=»;
for(ranNum=1; ranNum<=6; ranNum++){
rannumber+=Math.floor(Math.random()*10).toString();
}
$(‘#secret’).text(rannumber);
}

[/cc]

El número generador lo pintamos dentro de nuestro html de la siguiente manera:

[cc][/cc]

[cc]if ($(«#secret»)) randomgen();[/cc]

Finalmente, creamos un nuevo método que lo que hará es, básicamente, comprobar el texto de dicho span con el valor introducido en el campo de texto especificado.

[cc]

$.validator.addMethod(«antispam», function(antispam)
{
if ( antispam==$(«#secret»).text() ) return true;
});

[/cc]

Y mucho más no hay para comentar, tienes una demostración online de este ejemplo muy básico, decir como aclaración, que los nuevos campos disponibles en HTML5 tales como EMAIL, NUMBER, etc. degradan a tipo TEXT si el navegador no los soporta, es decir, que si metes un campo type=»NUMBER» en un móvil te saldrá el teclado numérico, en un navegador que soporte este tipo de campo te dejará escribir sólo números y en un navegador internet explorer viejos verás el input type=»TEXT» de toda la vida, lo mismo pasa con el email.

Bueno, espero que te haya gustado este mini tutorial, lo apliques a tus formularios para dar funcionalidad extra y me comentes mejoras, errores o lo que sea que encuentres y ayude a mejorar el código.

Antes de irme, te dejo el código completo del HTML listo para copypastear 😉

[cc]





Texto de ayuda en formularios y validación en contenedor con jQuery y Validation


Texto de ayuda en formularios y validación en contenedor con jQuery y Validation.








    [/cc]