Mi primera web en HTML5 IV. Validación de formularios inteligentes compatible con todos los navegadores gracias a Modernizr

Klaus Förster y Bernd Öggl, dos desarrolladores web de la Universidad de Innsbruck, dicen algo interesante sobre la novedad de los formularios inteligentes en su libro HTML5, Guidelines for Web Developers, publicado en 2011 por Addison Wesley.

Los austríacos señalan que los formularios han permanecido casi intactos desde la llegada de HTML 2.0, en 1995, lo que demuestra que el diseño original de Tim Berners Lee fue una gran previsión porque ha resistido el paso de más de veinte años, nada más y nada menos.

No obstante, como explico en el post Mi primera web en HTML5 I. Un poco de historia, la situación actual exige una puesta al día urgente en materia de formularios para satisfacer la necesidad de los desarrolladores, los usuarios y la Web 2.0. Vamos a repasarla.

Mejora del atributo type de la etiqueta input

La especificación HTML5 mejora el elemento input de los formularios tradicionales mediante la incorporación de los siguientes valores en el atributo type:

  • color
  • date
  • datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Nuevos atributos para la etiqueta input

HTML5 trae consigo nuevos atributos para la etiqueta input. A continuación comentamos los atributos autofocus, maxlength, placeholder y required porque son los que vamos a utilizar en nuestro ejemplo de validación de formulario HTML5 compatible con todos los navegadores. Los comentamos para que entiendas qué significan cuando veas el ejemplo de la validación 🙂

  • autofocus posiciona automáticamente el cursor en el campo cuando la página se carga
  • maxlength define la longitud máxima de un campo
  • placeholder proporciona una pista que describe el valor esperado en un campo
  • required hace que el campo deba completarse antes de enviar el formulario

Un formulario HTML5 de ejemplo, por favor

Ahora viene lo interesante. Ha llegado el momento de ir al grano y pasar al ejemplo de la validación de formularios compatible. Para ello adjunto el siguiente formulario cuyo código HTML5 ha superado el servicio de validación del W3C. Fíjate que ya incorpora los nuevos atributos presentados en el apartado anterior.

En HTML5 el navegador valida nativamente los formularios de acuerdo a los parámetros que define el desarrollador. Por lo tanto, ¡nuestro formulario HTML5 del ejemplo anterior ya está preparado para la validación de los datos en el lado del cliente! Compruébalo tú mism@.

Tan sólo tienes que abrir este formulario en cualquier navegador moderno, por ejemplo, Firefox 9 o Google Chrome 15, introducir datos supuestamente incorrectos, como una dirección de correo electrónico inválida, o dejar el campo Nombre vacío, e intentar enviarlo.

¿Ya lo has hecho? ¿Has observado cómo el navegador valida el formulario? ¡Esto es genial! ¿Sabías que antes de HTML5 este paso se tenía que programar manualmente con JavaScript?

El problema de los navegadores viejos

¿Piensas que ya hemos acabado? Recuerda que puede interesarte mantener la compatibilidad de tus nuevos desarrollos HTML5 con los navegadores que no soportan las características de la nueva especificación. Sí, así es como llegados a este punto nos vemos en la vieja encruzijada… ¿Qué hacemos con los usuarios de los navegadores viejos?

En este caso vamos a echar mano de Modernizr, que para eso está, puesto que la alternativa poco ética es obviarlos deliberadamente. Específicamente nos apoyaremos en el objeto JavaScript llamado Modernizr que, valga la redundancia, crea Modernizr cuando somete a examen al navegador donde se ejecuta. Este es el objeto contenedor de las características detectadas en forma de variables booleanas.

Para compabiti…, compatili…, compa-ti-bi-li-zar (¡ya lo he dicho!) nuestro formulario HTML5 con los navegadores que no soportan la validación nativa en el cliente vamos a adoptar una filosofía de reutilización de código. Por consiguiente, te invito a que busques y adaptes tus archivos JavaScript para casos como el que nos ocupa. No hay necesidad de reinventar la rueda.

A continuación te voy a dar una idea JavaScript. Seguramente hasta ahora habrás resuelto la validación cliente de tus formularios con un código parecido al siguiente:

Pues bien, para que ese código JavaScript de validación que ya tienes en alguna parte funcione en todos los navegadores debes hacer algo como lo siguiente. La idea consiste en pasar a la validación JavaScript pura y dura cuando Modernizr detecta que el navegador de turno no soporta alguna de las características de validación que utilizamos en nuestro HTML5.

Es decir, si el navegador no soporta algún input o atributo HTML5 que nosotros utilizamos en nuestro formulario, entonces deshabilitamos la validación nativa y delegamos la lógica correspondiente a nuestro script JS seguro.

Con esto ganaremos tiempo, fiabilidad y esfuerzo. Reutilizamos código ya existente supuestamente fiable escribiendo dos líneas de código. Por cierto, fíjate que puedes quitar la validación automática de tus formularios HTML5 poniendo el atributo novalidate en la etiqueta form.

Ahora voy a poner un código muy parecido al anterior, con una pequeña diferencia, y te pediré que lo ejecutes en un Firefox 9 (o anterior) y un Google Chrome 15 (o anterior).

¿Ya has visto lo que pasa en Firefox y Chrome? Como en ninguno de los casos está definida la variable Modernizr.input.maxlength, sucede que no se ejecuta la validación nativa predeterminada; ésta queda deshabilitada. El flujo de ejecución del programa pasa a la función validateContactForm cuando el usuario envía el formulario.

4 comentarios

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *