26 septiembre, 2018 Jose Antonio Vila

Validar un formulario con HTML5

Una de las primeras cosas que aprendí cuando empecé a programar fue validar todos los datos que recibía en la web o aplicación que estuviera desarrollando. Todos los formularios tienen que validarse. Hay que considerar siempre que la persona que navega en nuestra página y va a rellenar la información se va a equivocar.

Para ello tenía una biblioteca enorme de recursos para validar emails, teléfonos, documentos de identidad, etc. que iba reutilizando en función del formulario. Me costó varios proyectos hacer un repositorio de códigos para reutilizar, pero al final llegó un punto en el que era genial. Solo copiaba y pegaba código y el formulario se validaba. Pero tenía muchos problemas.

El primero era que en tema de usabilidad para el usuario dejaba bastante que desear. Cada vez que había un error, había que comunicárselo al usuario y nunca encontraba la manera adecuada de mostrarle el fallo sin que supusiese un pequeño infarto para los diseñadores. Luego estaba la cantidad de código que generaba. Cada validación tenía una función detrás que suponían muchas líneas de javascript. Y también estaba la posibilidad de que hubiese un fallo en alguna de las validaciones que has reutilizado en decenas de proyectos.

Pero con el paso de los años, llegó HTML5. Y con HTML5 llegó una solución maravillosa: la validación de los formularios (casi) automáticamente.

Con una validación del lado del cliente, HTML5 nos ofrece una magnífica experiencia de usuario y nos ahorra mucho tiempo y código en la parte front-end. Él solo se encarga de validar que la información sea adecuada, de poner el mensaje de error en función del fallo detectado, darle un estilo…
¡OJO! Esta validación, como decía, es solo del lado del cliente, por lo que para tener una validación ideal de nuestra web, en el back-end es necesario que hagamos una validación de que toda la información que llega es adecuada.

 

CÓMO FUNCIONA LA VALIDACIÓN HTML5

HTML5 realiza la validación en función de algunos atributos que colocamos en cada campo del formulario (<input>, <textarea> y compañía). Estos atributos controlan desde que el campo se haya rellenado hasta que el campo sea un número comprendido en cierto rango.
Si al realizar la validación hay un fallo, automáticamente nos saltará un mensaje con el tipo de fallo que se ha cometido, el cual podemos personalizar fácilmente mediante CSS con la pseudo-clase :invalid. También podemos controlar otros aspectos visuales con otras pseudo-clases como son :valid, :required u :optional

LOS ATRIBUTOS

Aunque existe un listado algo más amplio, me voy a centrar en los 3 atributos que más utilizo en mi día a día para la validación de formularios con HTML5

Type

Este es el más importante de los atributos. Con él le indicamos al navegador qué tipo de dato esperamos y qué tipo de control tiene que ejercer sobre la información que añada el usuario. Es un clásico desde hace muchos años que seguramente muchos todavía lo utilizan únicamente para el clásico <input type=»text» />, pero en HTML5 disponemos de muchos más valores:

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

Si la información que introducimos en el campo no coincide con el valor que le hemos dado al atributo type, automáticamente nos mostrará el mensaje de error.
Pero, ¿qué pasa con los tipos que no son iguales en todo el mundo? Por ejemplo, con un número de teléfono, que varía la validación dependiendo del país. Pues que necesitamos utilizar el siguiente atributo

Pattern

Si type era el atributo más importante, este se trata del más mágico de todos. Básicamente nos permite, mediante expresiones regulares, crear patrones de validación sin prácticamente ningún. Las posibilidades que ofrece son infinitas.
Las expresiones regulares (también conocidas como regex, del inglés) son patrones utilizados para encontrar una determinada combinación de caracteres dentro de una pequeña cadena de texto. Más info en este enlace.

Siguiendo con el ejemplo que teníamos antes del número de teléfono. En España, todos los teléfonos empiezan por 6, 7, 8 o 9 y tienen una longitud de 9 cifras. En este caso, nuestra validación sería algo como esto:

Required

Y por último, el más sencillo de los atributos. Sencillamente le indica al formulario que el campo en el que aparece es obligatorio.
Se puede encontrar escrito de dos maneras diferentes: <input type=»text required=»required» /> o simplemente <input type=»text required />

Con estos tres atributos se puede validar prácticamente cualquier formulario y campo gracias a HTML5. La clave es saber desarrollar expresiones regulares para el atributo pattern, y con ello y una buena mezcla con los demás atributos el proceso de validación será un juego de niños.

 

OTRAS CONSIDERACIONES

Hay un par de apuntes que quiero dejar antes de finalizar el artículo: lo primero, es que este tipo de validación con HTML5 también tiene sus lados negativos.

El más importante y que ya se ha mencionado: este tipo de validación no sustituye la validación del back-end. Hay que tenerlo bien claro, porque es allí donde hay que extremar la seguridad.
Otro de los aspectos es la necesidad de conocer expresiones regulares. Es un mal menor, porque es un concepto relativamente sencillo y que la mayoría de programadores conoce, pero si se te atragantan esta validación pierde parte de su encanto.
Y por último, dentro de las cosas menos bonitas, está el problema del idioma: los mensajes de error salen por defecto en el idioma del navegador. Es decir, si tu estás haciendo una web en español pero los visitantes están mayoritariamente en EEUU y sus ordenadores están configurados en inglés, los mensajes de error saldrán en inglés. Se puede personalizar con el atributo tittle, pero no deja de ser algo a considerar.

Y el segundo apunte, son unos cuantos enlaces con información extra: una herramienta con explicación de expresiones regulares, un listado de todos los atributos y algunos ejemplos de uso.

¿Tú ya conocías este método de validación? ¿Es nuevo para ti? Recuerda que puedes contar tu experiencia en los comentarios del blog!

 

 

Raiola Networks

Sobre mí

Jose Antonio Vila Desarrollando webs desde hace más de 10 años. Hace mucho que dejé atrás la vida en agencias y me abracé a la vida de freelance.
🖥 Si tienes algún proyecto en mente, contacta conmigo.
📖 Si quieres leer más cosas que escribo, echa un ojo a mi web personal

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *