El atributo pattern para validar formularios mediante Expresiones Regulares en HTML5

HTML5 nos permite hacer una gran cantidad de cosas, entre ellas tenemos la de validaciones de formularios de una manera sencilla y sin complicaciones, de manera nativa y muy amigable, ya que empleamos atributos en los campos para tal fin; esto nos ahorra muchos dolores de cabeza de estar empleando librerías externas, jugar con los eventos y demás, todo es nativo y prácticamente automatizado.

Validaciones del lado del cliente con HTML5

Estas validaciones NO son un reemplazo a las validaciones del lado del servidor, como buen programador que seguramente eres, debes saber que es necesario validar en ambos lados, sobre todo del lado del servidor siempre debemos de verificar los datos recibidos; ya que al tratarse de HTML el usuario puede modificar el HTML desde la consola de desarrolladores del navegador o simplemente crear su propio formulario que apunte a nuestro servidor y destruir o dañar nuestra aplicación.

El atributo type para definir el tipo de dato del input y demás elementos del formulario

Cómo explicamos en una entrada anterior, en donde hablamos sobre los distintos tipos de campos de formularios que nos trae HTML5:

El atributo pattern es compatible con los siguientes input de los formularios:

• email
• password
• search
• tel
• text
• url
• number
• month
• time
• week
• datetime
• datetime-local

Qué son prácticamente todos; antes de continuar debes tener claro que gran parte de las validaciones son realizadas con las expresiones regulares que explicamos un poco en la siguiente sección.

Una práctica crucial que hay que llevar a cabo de manera obligatoria cuando se realizan aplicaciones sobre todo las aplicaciones web, es la de validar los datos introducidos por el usuario tanto del lado del cliente como del lado del servidor; con el surgimiento de JavaScript es posible realizar validaciones del lado del cliente y de esta forma evitar múltiples llamadas al servidor y saturar el mismo.

¿Qué son las expresiones regulares?

Las expresiones regulares son patrones empleados en múltiples aplicaciones para la búsqueda de determinados caracteres o combinaciones de los mismos y un subconjunto de este último que es la validaciones de formularios con JavaScript; que gracias a HTML5 cuenta con su propia API mediante el atributo pattern que podemos emplear en los formularios.

Las expresiones regulares son empleadas para encontrar coincidencias y patrones, es decir que tenga el formato deseado y rechazarlo o aceptarlo según se requiera; en el caso que nos interesa, para los campos de formularios, podemos indicar que longitud, que tipos de datos, coincidencias y qué caracteres debe tener y que no y en qué posiciones o rango de posiciones; son muy empleados no solo para las validaciones si no para todo tipo de aplicaciones en general y son ampliamente soportados por los lenguajes de programación incluido por HTML5 que es un lenguaje básico para la World Wide Web; puedes tener mas información al respecto en MDN: Expresiones Regulares

El problema de las validaciones con JavaScript nativo

Actualmente existen una gran cantidad de navegadores web cada uno de ellos con sus propias convenciones lo que dificulta las validaciones del lado del cliente a través de esta vía; además de que de esta forma no tenemos que incorporar o desarrollar nuestros propios plugins o complementos que realicen esta labor.

Validar formularios es una tarea fundamental hoy en día, y esto es debido que los formularios se han convertido en la pieza fundamental de cualquier aplicación o página web, son empleados para conseguir todo tipo de información por parte del usuario y muchas veces es necesario que esta información o datos introducidos por el usuario tenga cierto formato u organización y aquí entran las validaciones mediante JavaScript y el caso de interés de nosotros, las validaciones mediante las expresiones regulares que podemos configurar empleando un simple atributo y la expresión regular para la validación.

Plugins JavaScript para la validación de datos y tipos de validaciones

Existen una gran cantidad de librerías, framework o plugin desarrollados por terceros que realizan esta tarea de validar los datos de los usuario y muchos de ellos con soporte para navegadores web más utilizados; sin embargo esto trae como consecuencia la inclusión de archivos en la aplicación web y por ende aumentar el tiempo de carga del sitio para realizar una tarea tan sencilla como validar los datos; que gracias a HML5 ya no es necesario emplear estas librerías, nos basta con emplear las expresiones regulares como indicamos anteriormente.

Aunque también recuerden que siempre debemos validar los datos en ambos lados (doble validación), al menos los datos deben ser validados del lado del servidor ya que este es el que procesa la data y el ente fundamental de guardar la data del usuario, recuerda que el usuario puede pasar de emplear tu formulário e ir directamente contra el servidor o incluso de manipular el HTML del formulario.