El atributo “pattern” solo está permitido cuando el tipo de input es “email”, “password”, “search”, “tel”, “text”, o “url”.

El atributo pattern proporciona una forma potente de añadir validación de formularios del lado del cliente directamente en HTML sin depender de JavaScript. Acepta una expresión regular que el navegador usa para validar la entrada del usuario antes de que se envíe el formulario. Sin embargo, la especificación HTML restringe pattern a tipos de input donde el usuario introduce texto de forma libre. Los tipos de input como number, date, range, color y checkbox tienen sus propios mecanismos de validación incorporados (como min, max y step), por lo que aplicar un patrón regex a ellos no tiene sentido y es inválido.

Cuando añades pattern a un tipo de input no soportado, los navegadores simplemente lo ignorarán. Esto significa que puedes pensar que tienes validación en su lugar cuando en realidad no la tienes, lo que puede llevar a que se envíen datos inválidos inesperados. Eliminar el atributo inválido también mantiene tu marcado limpio y conforme a los estándares, lo que beneficia a las herramientas de accesibilidad y al comportamiento futuro de los navegadores.

Por qué ciertos tipos no soportan pattern

• number — Los valores están restringidos por min, max y step. El navegador fuerza la entrada numérica de forma nativa.
• date, time, datetime-local, month, week — Estos usan selectores de fecha/hora con sus propias restricciones de formato y rango.
• range — Un control deslizante ya restringido por min, max y step.
• checkbox, radio — Estos se activan/desactivan o se seleccionan de un grupo; un patrón regex no aplica.
• file — La selección de archivos se maneja por el selector de archivos del SO; usa el atributo accept en su lugar.
• color — Usa un selector de color con un formato hexadecimal fijo.
• hidden — No es editable por el usuario, por lo que la validación del lado del cliente es irrelevante.

Cómo solucionarlo

1. Elimina el atributo pattern si el tipo de input ya proporciona validación suficiente a través de sus controles nativos.
2. Cambia el type del input a uno de los seis tipos soportados (email, password, search, tel, text o url) si genuinamente necesitas validación basada en regex.
3. Usa atributos alternativos como min, max, step o accept que están diseñados para el tipo específico de input.
4. Usa validación JavaScript si necesitas lógica de validación personalizada que vaya más allá de lo que ofrecen los atributos nativos.

Ejemplos

❌ Incorrecto: pattern en un input number

<label for="qty">Cantidad (múltiplos de 5):</label>
<input type="number" id="qty" name="qty" pattern="[0-9]+" min="0" max="100">

El atributo pattern no está permitido en type="number". Como min, max y step ya manejan las restricciones numéricas, pattern es innecesario aquí.

✅ Correcto: usar step en lugar de pattern para validación numérica

<label for="qty">Cantidad (múltiplos de 5):</label>
<input type="number" id="qty" name="qty" min="0" max="100" step="5">

❌ Incorrecto: pattern en un input date

<label for="dob">Fecha de nacimiento:</label>
<input type="date" id="dob" name="dob" pattern="\d{4}-\d{2}-\d{2}">

El tipo de input date ya fuerza un formato de fecha a través de su selector nativo, por lo que pattern es inválido aquí.

✅ Correcto: eliminar pattern del input date

<label for="dob">Fecha de nacimiento:</label>
<input type="date" id="dob" name="dob" min="1900-01-01" max="2025-12-31">

❌ Incorrecto: pattern en un input checkbox

<label>
  <input type="checkbox" name="agree" pattern=".+"> Acepto los términos
</label>

✅ Correcto: usar required en lugar de pattern para checkbox

<label>
  <input type="checkbox" name="agree" required> Acepto los términos
</label>

✅ Correcto: pattern en un input text soportado

<label for="zip">Código postal:</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" title="Código postal de cinco dígitos" required>

Cuando uses pattern en un tipo de input soportado, incluye siempre un atributo title que describa el formato esperado. Los navegadores muestran el texto del title como parte del mensaje de error de validación, ayudando a los usuarios a entender qué entrada se espera.

Más información:

html.com

Input Pattern

→