Formularios en HTML5 con tooltips y jQuery validate

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form class="datos" action="" method="post">
<fieldset><legend>Texto de ayuda en formularios y validación en contenedor con jQuery y Validation.</legend>
<div id="validate"></div>
<div data-helper="Introduce tu nombre"><label for="nombre">Nombre</label>
<input class="required" id="nombre" title="Introduce tu nombre" type="text" name="nombre" /></div>
<div data-helper="Introduce tu correo electrónico... No spam, I swear!"><label for="email">Correo Electrónico</label>
<input class="required email" id="email" title="Introduce tu correo electrónico" type="email" name="email" /></div>
<div data-helper="Indica tu edad"><label for="edad">Edad</label>
<input class="required number" id="edad" title="Indica tu edad" type="number" name="edad" /></div>
<div data-helper="I don't like bots!"><label for="codigo">Y el código ultrasecreto es... <span id="secret"></span> (<a class="refresh" href="#">cambiar</a>)</label>
<input class="required antispam" id="codigo" title="Ingresa el código antispam" type="text" maxlength="6" name="codigo" /></div>
<div class="submit"><input type="submit" value="Simular envío" /></div></fieldset>
</form>

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:

1
2
<div data-helper="Introduce tu nombre"><label for="&quot;nombre">Nombre</label>
<input class="required" id="nombre" title="Introduce tu nombre" type="text" name="nombre" /></div>

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é…

1
div {clear:both;padding:0 0 20px 0;position:relative}

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.

1
<div data-helper="Introduce tu correo electr&amp;oacute;nico... No spam, I swear!">

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.

1
<div id="validate"></div>

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:

1
2
3
4
5
6
7
8
function randomgen()
{
var rannumber='';
for(ranNum=1; ranNum&lt;=6; ranNum++){
rannumber+=Math.floor(Math.random()*10).toString();
}
$('#secret').text(rannumber);
}

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

1
<label for="codigo">Y el c&amp;oacute;digo ultrasecreto es... <span id="secret"></span> (<a href="#">cambiar</a>)</label>
1
if ($("#secret")) randomgen();

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.

1
2
3
4
$.validator.addMethod("antispam", function(antispam)
{
if ( antispam==$("#secret").text() ) return true;
});

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 😉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Texto de ayuda en formularios y validaci&oacute;n en contenedor con jQuery y Validation</title>
   
    <link href='http://fonts.googleapis.com/css?family=Roboto:300,500' rel='stylesheet' type='text/css'>
    <style type="text/css">
    *{font-family:Roboto,sans-serif;font-weight:300;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
    body{background:url(http://www.adwe.es/wp-content/themes/adwe/images/logo.png) 50% 20px no-repeat;}
    form {width:600px;margin:100px auto;box-shadow:0 0 50px rgba(0,0,0,0.50);font-size:1em}
        fieldset{padding:50px 50px 0;border:0}
            legend {text-align:center;padding:20px 0 0 0;font-size:1.5em}
                div {clear:both;padding:0 0 20px 0;position:relative}
           
            input[type=text],input[type=email],input[type=number] {padding:10px;border:1px solid #ccc;border-radius:4px;display:block;width:100%;font-size:1em;outline:none;transition: all 0.15s ease-in-out;}
            input:focus {box-shadow: 0 0 5px rgba(255,0,0,1);border:1px solid rgba(255,0,0,0.8);}
            input[type=submit] {padding:10px 20px;border:1px solid #666;border-radius:4px;display:table;width:auto;margin:0 auto;font-size:1em;background:#666;color:#fff}
           
            em.helper{z-index:1001;position:absolute;top:0;left:auto;font-size:0.90em;padding:5px;border-radius:4px 4px 0;color:#FFF;background:rgba(0,0,0,0.80);line-height:100%;text-align:center;margin:0 0 0 15px}
           
            em.helper:after {content: '';position: absolute;border-style: solid;border-width: 5px 5px 5px 0;border-color: transparent rgba(0,0,0,0.80);display: block;width: 0;z-index: 1;margin-top: -5px;left: -5px;top: 50%;}
           
            #validate{display:none}
           
            ul{margin:0;padding:0;list-style:none}
                ul li{color:red;margin:0}
       
    </style>
   
</head>
<body>
    <form action="" method="post" class="datos">
        <fieldset>
            <legend>Texto de ayuda en formularios y validaci&oacute;n en contenedor con jQuery y Validation.</legend>
            <div id="validate"><ul></ul></div>
            <div data-helper="Introduce tu nombre">
                <label for="nombre">Nombre</label>
                <input type="text" name="nombre" id="nombre" class="required" title="Introduce tu nombre">
            </div>
            <div data-helper="Introduce tu correo electr&oacute;nico... No spam, I swear!">
                <label for="email">Correo Electr&oacute;nico</label>
                <input type="email" name="email" id="email" class="required email" title="Introduce tu correo electr&oacute;nico">
            </div>
            <div data-helper="Indica tu edad">
                <label for="edad">Edad</label>
                <input type="number" name="edad" id="edad" class="required number" title="Indica tu edad">
            </div>
            <div data-helper="I don't like bots!">
                <label for="codigo">Y el c&oacute;digo ultrasecreto es... <span id="secret"></span> (<a href="#" class="refresh">cambiar</a>)</label>
                <input type="text" name="codigo" id="codigo" class="required antispam" maxlength="6" minlength="6" title="Ingresa el c&oacute;digo antispam">
            </div>
            <div class="submit">
                <input type="submit" value="Simular env&iacute;o">
            </div>
        </fieldset>
    </form>
   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_es.js "></script>
    <script>
    function randomgen()
    {
        var rannumber='';
        for(ranNum=1; ranNum<=6; ranNum++){
            rannumber+=Math.floor(Math.random()*10).toString();
        }
        $('#secret').text(rannumber);
    }
    $(document).ready(function()
    {
        $("form div:not(.submit)").on("tap mouseenter",function() { var mensaje=$(this).data("helper"); if (mensaje) $(this).find("label").append("<em class='helper'>"+mensaje+"</em>").show(); });
        $("form div").on("mouseleave",function() { $(this).find(".helper").remove(); });
       
        if ($("#secret")) randomgen();
       
        $(".refresh").bind("click",function(e){ e.preventDefault();randomgen(); })
       
        var container = $('div#validate');
        $("form.datos").validate({
            errorContainer: container,
            errorLabelContainer: $("ul", container),
            wrapper: 'li'
        });
       
        $.validator.addMethod("antispam", function(antispam)
        {
            if ( antispam==$("#secret").text() ) return true;
        });
       
    });
    </script>
   
   
</body>
</html>

Desarrollador Web, Maquetador CSS, SEO lover, programador PHP, RWD y jQuery. Fan de mi hija y de BonJovi, amante del Padel...

Comentarios arrow 2 Comentarios
  1. Está increíble este blog

  2. Hola. Con respecto a este blog:
    http://www.adwe.es/codigo/html/formularios-en-html5-con-tooltips-y-jquery-validate

    En que parte se coloca la dirección de correo electrónico para el envío del mensaje?

    Muchas gracias y fabuloso recurso.

Responder a Jesus Cancelar respuesta

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.