O atributo “pattern” só é permitido quando o tipo de input é “email”, “password”, “search”, “tel”, “text”, ou “url”.

O atributo pattern oferece uma forma poderosa de adicionar validação de formulários do lado do cliente diretamente no HTML sem depender de JavaScript. Aceita uma expressão regular que o navegador usa para validar a entrada do utilizador antes do formulário ser enviado. No entanto, a especificação HTML restringe pattern a tipos de input onde o utilizador insere texto de forma livre. Tipos de input como number, date, range, color, e checkbox têm os seus próprios mecanismos de validação integrados (como min, max, e step), pelo que aplicar um padrão regex a eles é sem sentido e inválido.

Quando adiciona pattern a um tipo de input não suportado, os navegadores simplesmente o ignoram. Isto significa que pode pensar que tem validação implementada quando na verdade não tem, o que pode levar ao envio inesperado de dados inválidos. Remover o atributo inválido também mantém a sua marcação limpa e em conformidade com os padrões, o que beneficia as ferramentas de acessibilidade e o comportamento futuro dos navegadores.

Porque é que certos tipos não suportam pattern

• number — Os valores são limitados por min, max, e step. O navegador força entrada numérica nativamente.
• date, time, datetime-local, month, week — Estes usam seletores de data/hora com as suas próprias restrições de formato e intervalo.
• range — Um controlo deslizante já limitado por min, max, e step.
• checkbox, radio — Estes são alternados ligado/desligado ou selecionados de um grupo; um padrão regex não se aplica.
• file — A seleção de ficheiros é tratada pelo seletor de ficheiros do sistema operativo; use o atributo accept em vez disso.
• color — Usa um seletor de cores com um formato hexadecimal fixo.
• hidden — Não é editável pelo utilizador, pelo que a validação do lado do cliente é irrelevante.

Como corrigir

1. Remover o atributo pattern se o tipo de input já fornece validação suficiente através dos seus controlos nativos.
2. Mudar o type do input para um dos seis tipos suportados (email, password, search, tel, text, ou url) se realmente precisa de validação baseada em regex.
3. Usar atributos alternativos como min, max, step, ou accept que são desenhados para o tipo específico de input.
4. Usar validação JavaScript se precisar de lógica de validação personalizada que vai além do que os atributos nativos oferecem.

Exemplos

❌ Incorreto: pattern num input number

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

O atributo pattern não é permitido em type="number". Uma vez que min, max, e step já lidam com restrições numéricas, pattern é desnecessário aqui.

✅ Correto: usar step em vez de pattern para validação numérica

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

❌ Incorreto: pattern num input date

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

O tipo de input date já força um formato de data através do seu seletor nativo, pelo que pattern é inválido aqui.

✅ Correto: remover pattern do input date

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

❌ Incorreto: pattern num input checkbox

<label>
  <input type="checkbox" name="agree" pattern=".+"> Concordo com os termos
</label>

✅ Correto: usar required em vez de pattern para checkbox

<label>
  <input type="checkbox" name="agree" required> Concordo com os termos
</label>

✅ Correto: pattern num input text suportado

<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>

Quando usar pattern num tipo de input suportado, inclua sempre um atributo title que descreva o formato esperado. Os navegadores mostram o texto do title como parte da mensagem de erro de validação, ajudando os utilizadores a entender que entrada é esperada.

Saiba mais:

html.com

Input Pattern

→