Atributos Nativos de Validação HTML Que os Desenvolvedores Frequentemente Ignoram

Você está escrevendo JavaScript personalizado para validar formulários que o HTML poderia lidar nativamente. A maioria dos desenvolvedores frontend conhece required e pattern, mas a plataforma oferece muito mais—atributos que reduzem código, melhoram a acessibilidade e criam uma melhor UX sem dependências de frameworks.

Este artigo cobre os atributos de validação HTML que você provavelmente está negligenciando, além dos recursos CSS e JavaScript que tornam a validação nativa de formulários genuinamente útil.

O Atributo form: Controles Fora de Formulários

Precisa de um botão de envio no cabeçalho da página enquanto o formulário está no conteúdo principal? O atributo form permite que qualquer controle se associe a um formulário por ID, independentemente da posição no DOM.

<form id="checkout">
  <input type="email" name="email" required>
</form>

<button type="submit" form="checkout">Finalizar Compra</button>

Isso elimina malabarismos com wrappers e funciona com inputs, buttons, selects e textareas igualmente.

Sobrescritas Por Botão Que Você Deveria Conhecer

Um único formulário pode se comportar de maneira diferente dependendo de qual botão o submete. Esses atributos sobrescrevem as configurações do formulário pai:

• formaction — Submete para uma URL diferente
• formmethod — Usa GET em vez de POST (ou vice-versa)
• formenctype — Altera a codificação para uploads de arquivo
• formtarget — Abre a resposta em nova aba
• formnovalidate — Ignora a validação completamente

O atributo formnovalidate merece atenção especial. É essencial para botões “Salvar Rascunho” onde dados incompletos são aceitáveis.

Validação com Pattern e Mensagens de Erro Úteis

O atributo pattern aceita regex, mas os navegadores mostram erros genéricos por padrão. Combine-o com title para fornecer contexto:

<input type="text" 
       pattern="[A-Z]{2}[0-9]{6}" 
       title="Formato: Duas letras seguidas de seis dígitos (ex: AB123456)">

Nota: quando multiple está definido em inputs como type="email", o pattern é aplicado a cada valor individual, não à string completa separada por vírgulas.

Tokens Modernos de autocomplete

Além de on e off, autocomplete aceita tokens semânticos que melhoram a precisão do preenchimento automático:

• autocomplete="new-password" — Aciona geradores de senha
• autocomplete="one-time-code" — Otimiza para verificação por SMS
• autocomplete="webauthn" — Sinaliza campos de credenciais passkey

Esses tokens reduzem o atrito e sinalizam intenção para navegadores e gerenciadores de senha (veja a lista completa de tokens na especificação HTML e na documentação do autocomplete no MDN).

O Atributo dirname para Internacionalização

Ao suportar idiomas da direita para a esquerda, dirname submete automaticamente a direção do texto junto com o valor:

<input type="text" name="comment" dirname="comment.dir">

O formulário submete tanto comment (o valor) quanto comment.dir (ltr ou rtl). Essencial para renderização adequada de conteúdo gerado pelo usuário.

A Nuance do readonly

Um equívoco comum: campos readonly participam do envio do formulário, mas se comportam de maneira diferente com validação. Eles submetem valores e podem receber foco.

No entanto, controles readonly são impedidos de validação de restrições no HTML moderno. Isso significa que atributos como required, pattern, min ou max são ignorados para fins de validação em inputs readonly nos navegadores evergreen atuais.

Se você precisa exibir um valor sem permitir edições e sem submetê-lo, disabled geralmente é a melhor escolha—embora campos desabilitados não submetam seus valores.

CSS :user-invalid para UX Moderna de Formulários

A pseudo-classe clássica :invalid dispara imediatamente, mostrando erros antes que os usuários interajam. A mais recente :user-invalid só corresponde após a interação do usuário—resolvendo o problema de “bordas vermelhas ao carregar a página”.

input:user-invalid {
  border-color: #dc3545;
}

input:user-valid {
  border-color: #28a745;
}

Isso cria uma melhor UX sem lógica de temporização em JavaScript. O suporte dos navegadores agora é sólido nos navegadores evergreen (veja :user-invalid no MDN).

A API de Validação de Restrições

Quando a validação nativa precisa de complementação, a API de Validação de Restrições fornece controle programático:

• checkValidity() — Retorna booleano, dispara evento invalid em caso de falha
• reportValidity() — Retorna booleano e mostra a UI de erro nativa
• setCustomValidity() — Define mensagens de erro personalizadas

const password = document.querySelector('#password');
const confirm = document.querySelector('#confirm');

confirm.addEventListener('input', () => {
  confirm.setCustomValidity(
    password.value !== confirm.value ? 'As senhas devem corresponder' : ''
  );
});

Chame setCustomValidity('') para limpar erros—passar qualquer string não vazia marca o campo como inválido.

Quando a Validação Nativa Fica Aquém

A validação nativa lida com a maioria dos casos, mas tem limitações:

• Validação entre campos (confirmação de senha) requer JavaScript
• O estilo das mensagens de erro é controlado pelo navegador
• Validação assíncrona complexa (disponibilidade de nome de usuário) precisa de código personalizado

A estratégia: use atributos de validação HTML como sua linha de base, estilize com CSS :user-invalid, e adicione a API de Validação de Restrições apenas onde necessário.

Conclusão

A validação nativa de formulários amadureceu significativamente. Os atributos cobertos aqui—form, sobrescritas por botão, dirname, tokens modernos de autocomplete—eliminam JavaScript personalizado substancial enquanto melhoram a acessibilidade por padrão.

Audite seus formulários existentes. Você provavelmente encontrará lógica de validação que o HTML lida nativamente, e problemas de UX que o CSS :user-invalid resolve sem um único event listener.

Perguntas Frequentes

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.