A API de validação de restrições

O HTML5 introduziu a validação integrada de formulários por meio dos atributos: required, type="email", type="number", min, max, pattern, minlength, maxlength. O navegador valida automaticamente ao enviar o formulário e exibe mensagens de erro, sem exigir JS.

:invalid corresponde aos campos de entrada que falham na validação; :valid corresponde aos campos aprovados. :user-invalid (moderno) corresponde apenas depois da interação do usuário, evitando bordas vermelhas em um formulário ainda sem interação. Estilize os erros com essas pseudo-classes.

Todo controle de formulário expõe uma propriedade validity — um objeto ValidityState com indicadores booleanos: valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort etc. Inspecione-o para decidir qual erro exibir.

input.checkValidity() retorna true se o valor satisfaz todas as restrições e false caso contrário. form.checkValidity() verifica o formulário inteiro. Isso é útil para verificações programáticas antes de executar AJAX ou permitir que o usuário avance em um assistente.

input.reportValidity() funciona como checkValidity, mas também aciona a dica de ferramenta integrada do navegador e focaliza o primeiro campo inválido. Use-o quando quiser uma interface nativa sem trabalho adicional; use checkValidity quando quiser uma exibição de erros totalmente personalizada.

As mensagens padrão do navegador ("Preencha este campo") podem não corresponder ao seu tom ou idioma. Substitua-as com input.setCustomValidity("Enter a valid coupon code"). O campo de entrada permanecerá inválido até que você limpe a mensagem com setCustomValidity("").

Adicione novalidate ao formulário para suprimir o comportamento padrão de validação do navegador. Isso é útil ao implementar uma exibição de erros totalmente personalizada — o formulário ainda será enviado, independentemente de ter passado ou não na validação; portanto, faça uma verificação programática antes do envio.

Cada controle dispara um evento invalid quando a validação falha. Escute-o para suprimir a dica de ferramenta padrão e exibir uma mensagem personalizada: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); }).

O atributo pattern contém uma expressão regular de JavaScript à qual o valor deve corresponder completamente (não é necessário usar as âncoras ^ e $ — elas são implícitas). Combine-o com o atributo title para descrever o formato esperado aos usuários.

A validação do HTML é uma conveniência para os usuários; qualquer pessoa que edite o DOM pode ignorá-la. Sempre valide novamente no servidor. As restrições do HTML existem para melhorar a experiência do usuário (retorno imediato e menos idas e voltas à rede), não para garantir segurança.

As restrições se acumulam: <input type="number" min="18" max="120" required step="1"> deve estar preenchido, conter um número inteiro e ficar entre 18 e 120. O navegador informa qual restrição específica falhou por meio dos indicadores de ValidityState, para que você possa exibir a mensagem correta.

Em que o pseudo-seletor CSS :user-invalid difere de :invalid?

Os atributos de validação nativos (required, type, pattern, min, max), juntamente com a API ValidityState, oferecem uma validação poderosa no lado do cliente, sem JS por padrão. CSS :user-invalid estiliza os erros depois da interação. checkValidity/reportValidity executam verificações programáticas. setCustomValidity substitui as mensagens padrão. Sempre valide novamente no servidor.