Cómo usar el atributo pattern para validar formularios mediante Expresiones Regulares en HTML5

Validar formularios siempre ha sido parte del “arte oscuro” del desarrollo web. Antes de HTML5, yo mismo pasé por esa época en la que tenías que pelearte con JavaScript, inventarte tus propios eventos y rogar para que cada navegador interpretara las reglas igual. Hoy, afortunadamente, la historia es muy distinta: gracias al atributo pattern podemos validar formularios directamente desde HTML con expresiones regulares, sin librerías externas y sin dolores de cabeza.

En esta guía te cuento cómo funciona realmente pattern, cómo combinarlo con expresiones regulares potentes y cómo evitar los errores más comunes que veo en muchos proyectos (incluidos los míos de años atrás). Vamos paso a paso.

Si quieres aprender a darle un buen estilo con CSS para formularios al momento de los errores.

Introducción a la validación nativa en HTML5

Por qué HTML5 simplifica la validación del lado del cliente

Cuando HTML5 apareció, lo primero que noté es que podía delegar en el navegador tareas que antes hacía manualmente: controlar tamaños, formatos, tipos de datos… y todo con atributos como type, required, minlength, maxlength o pattern. En mi caso fue un alivio total dejar de cargar librerías solo para validar un correo o un nombre de usuario.

El navegador hace gran parte del trabajo: detecta errores, muestra mensajes, evita envíos incorrectos y reacciona en tiempo real. Todo nativo.

Limitaciones y el papel de la validación del servidor

Pero ojo: algo que siempre repito (y lo aprendí a golpes) es que HTML5 NO reemplaza la validación del lado del servidor. Cualquier usuario puede modificar el HTML desde la consola del navegador o enviar un formulario falso apuntando directamente a tu endpoint. Por eso, la validación en cliente es comodidad; la del servidor es seguridad.

Qué es el atributo pattern y cómo funciona

Inputs compatibles con pattern

El atributo pattern funciona en prácticamente todos los inputs basados en texto:

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

Prácticamente cualquier campo “escribible” se pudiera validar de esta forma.

Cómo interpreta el navegador las expresiones regulares

El valor de pattern debe ser una expresión regular válida según las reglas del motor RegExp de JavaScript. Eso incluye:

• Escapar correctamente ()[]{}/|-
• Coincidencia de Unicode (flag v moderno)
• Soporte para rangos y clases avanzadas

Algo importante que muchos desconocen: pattern exige que la expresión coincida con TODO el valor, como si la expresión llevara ^(?: ... )$ por defecto.

Cuándo se activa patternMismatch y validityState

Cada input tiene un objeto interno llamado validityState. Si el valor no coincide con el patrón, validityState.patternMismatch se activa. Es lo que dispara el estilo :invalid y los mensajes del navegador.

Esto es tremendamente útil porque no hace falta escribir ni una línea de JavaScript para detectar fallos básicos.

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.

Debes tener claro que gran parte de las validaciones son realizadas con las expresiones regulares que explicamos un poco en la siguiente sección.

Expresiones regulares en HTML5: fundamentos clave

Símbolos esenciales para crear patrones útiles

Si vienes de usar regex en JavaScript, ya llevas ventaja. Aquí los símbolos más usados:

• . → cualquier carácter
• [0-9] → dígitos
• [A-Za-z] → letras
• + → uno o más
• * → cero o más
• {n,m} → longitud mínima/máxima
• | → alternativas
• \. → punto literal

Las primeras veces que traté de validar formularios con expresiones complejas, me costaba dar con el patrón exacto. Con el tiempo descubrí que casi todo puede resolverse con rangos y cuantificadores bien armados.

Reglas de coincidencia completa en pattern

A diferencia de muchos motores regex, aquí no hay coincidencias parciales. Si el patrón dice [a-z]{4,8}, cualquier cosa que no cumpla exactamente esa longitud y ese rango de caracteres es inválida.

Errores comunes al construir patrones

Los errores que más he visto (y cometido):

• Escribir barras /regex/ (no se usan en pattern).
• Olvidar escapar caracteres especiales.
• Intentar validar emails “perfectos” con regex gigantescos.
• Crear patrones demasiado estrictos que frustran al usuario.

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

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 formulario e ir directamente contra el servidor o incluso de manipular el HTML del formulario.

La IA como una herramienta genial para generar las expresiones regulares

El problema de las expresiones regulares es que son abstractas, pero, gracias a la IA podemos pedirle de que nos ayude a generar expresiones regulares de TODO tipo para nuestras aplicaciones y lo hace realmente bien ya listas para usar.

• Puedes usar prompt como, genérame una expresión regular que valida que es un email.
• O que tiene determinado enlace.
• Una para quitar determinados elementos HTML.
• Y un largo etc.

Ejemplos prácticos de pattern para formularios reales

Veamos algunos ejemplo típicos para validar 

Validar nombres de usuario

Ejemplo clásico:

<input type="text" pattern="[A-Za-z0-9]{5,40}" required>

Yo mismo suelo usar patrones de este estilo que le pido a la IA que los haga por mi y yo los valido cuando quiero evitar caracteres raros y mantener un rango de longitud razonable.

Validar emails, teléfonos y URLs

<input type="email" pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$">
<input type="tel" pattern="[0-9]{9}">
<input type="url" pattern="https?://.+">

Recuerdo cuando intentaba validar teléfonos con JavaScript puro y cada navegador interpretaba inputs diferentes… con pattern aquello quedó atrás.

Validar contraseñas fuertes

<input type="password"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}"
required>

Validar fechas y campos personalizados

<input type="text" pattern="\d{4}-\d{2}-\d{2}" placeholder="YYYY-MM-DD">

Mejorar la experiencia del usuario con mensajes personalizados

Cómo usar el atributo title correctamente

Siempre recomiendo acompañar cada pattern con un title. Esto mejora la accesibilidad y evita que el usuario se pregunte “¿qué hice mal?”.

Reemplazar el mensaje nativo con setCustomValidity()

Cuando necesito mensajes más amigables, uso:

input.oninvalid = (e) => {
 e.target.setCustomValidity("El formato no es válido. Ejemplo: abc123");
};

Evitar malas prácticas de accesibilidad

Evito depender solo del title, porque algunos lectores de pantalla lo ignoran. La descripción debe estar visible.

Estilizar validaciones con CSS (:valid y :invalid)

Indicadores visuales claros y accesibles

input:invalid { border-color: red; }
input:valid { border-color: green; }

Cuándo evitar estilos que distraen

Aprendí que cambiar el borde del input mientras el usuario está escribiendo puede generar ansiedad. Lo mejor es aplicar estilos solo después de que el campo sea “tocado”.

Pattern vs. JavaScript vs. validación del servidor

• Cuándo confiar solo en HTML5
  • Si el formulario es simple, HTML5 basta. Muchas veces me ahorro funciones enteras de JavaScript.
• Cuándo complementar con JavaScript
  • Para mensajes dinámicos, validación en tiempo real o patrones muy complejos, JS sigue siendo útil.
• Por qué siempre debe existir validación en servidor
  • Aquí no hay negociación: todo debe validarse del lado del servidor. Es un principio básico de seguridad.

Patrones recomendados y tabla de expresiones habituales

Letras, números, rangos y combinaciones

• Necesidad    Pattern
• Solo letras    [A-Za-z]+
• Solo números    [0-9]+
• Texto alfanumérico    [A-Za-z0-9]+
• Rango de longitud    .{5,20}
• Username estándar    [A-Za-z0-9_]{4,16}
• Patrones avanzados listos para copiar
• Caso    Pattern
• Password fuerte    (?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).{8,}
• Fecha AAAA-MM-DD    \d{4}-\d{2}-\d{2}
• Código postal    \d{5}
• URL simple    https?://.+

Preguntas frecuentes (FAQ)

• ¿Pattern valida todo el valor?
  • Sí, siempre exige coincidencia completa.
• ¿Qué inputs lo soportan?
  • Funcionan casi todos los textos: email, url, search, tel, password, etc.
• ¿Es obligatorio usar title?
  • No, pero es altamente recomendable.
• ¿Pattern sustituye JavaScript?
  • En casos simples, sí. En casos avanzados, no.
• ¿Safari soporta pattern?
  • Actualmente sí, aunque durante un tiempo estuvo incompleto.

Conclusiones finales

Validar formularios con el atributo pattern es una de las herramientas más potentes y sencillas que ofrece HTML5. En mi experiencia ha reducido la cantidad de código, errores de usuario y dependencia de librerías externas. Eso sí: nunca olvides validar en servidor y mantener tus patrones claros y accesibles.

Aprende a usar personalizar la URL del envío de un formulario con formAction