Contexto
Validar um campo antes do envio pode reduzir retrabalho, mas também pode interromper a digitação e fazer a pessoa achar que errou antes de terminar. O momento da validação deve acompanhar o tipo de dado, a expectativa da tarefa e o custo de uma interrupção.
Como regra inicial, não mostre erro ao focar um campo vazio nem a cada tecla sem necessidade. Prefira validar ao tentar avançar ou enviar; use feedback durante o preenchimento quando ele puder evitar um erro previsível sem interromper a tarefa.
Defina o momento de validação por campo. Campos obrigatórios podem ser verificados quando a pessoa tenta avançar ou enviar. Formatos com tamanho conhecido, como CEP, telefone ou cartão, podem ser validados quando a entrada estiver completa. Regras de disponibilidade ou cálculo podem usar validação assíncrona após uma pausa, com estado de carregamento e mensagem clara.
Para senhas, mostre os requisitos antes ou durante o preenchimento e atualize cada critério conforme ele for atendido. Para confirmação de senha ou outros campos dependentes, revalide o campo relacionado assim que a alteração resolver ou criar a inconsistência.
Mantenha a mensagem junto ao campo, preserve o valor digitado e remova o erro assim que a entrada ficar válida. A validação no navegador melhora a orientação, mas a regra também precisa ser conferida no servidor.
Porque isso importa?
A validação no momento certo reduz a distância entre o erro e a correção. A pessoa ainda lembra o que digitou e pode ajustar o valor sem percorrer novamente o formulário.
O excesso produz o efeito contrário: uma mensagem em um campo vazio, um erro a cada tecla ou uma mudança brusca de foco interrompe a tarefa e aumenta a dúvida. A Baymard encontrou benefícios na validação inline, mas também observou frustração quando o sistema sinaliza erro antes de a pessoa terminar.
Não existe uma técnica universal. O W3C reconhece benefícios da validação no cliente, mas exige validação no servidor; o NHS recomenda mostrar erros quando a pessoa tenta avançar; e o USWDS registra problemas de usabilidade e acessibilidade em seu componente de validação. A escolha deve ser testada com o público e o tipo de campo reais.
Quando usar?
- Ao tentar avançar ou enviar o formulário.
- Quando o campo atingir um tamanho completo e verificável.
- Quando uma regra assíncrona puder responder sem bloquear a tarefa.
- Durante requisitos de senha, com critérios visíveis.
- Em campos dependentes, após uma alteração que mude a validade.
- Quando a correção imediata reduzir retrabalho.
Quando evitar?
- Ao focar um campo vazio.
- A cada tecla sem uma necessidade clara.
- Antes de a pessoa conseguir completar o valor.
- Com mudança automática de foco.
- Com consulta assíncrona sem estado ou retorno compreensível.
- Quando o feedback só repete uma instrução já visível.
Recomendações
Faça
- Defina o gatilho por campo.
- Valide no avanço ou envio.
- Valide formatos completos.
- Mostre requisitos antes.
- Indique estados assíncronos.
- Revalide campos dependentes.
- Remova o erro ao corrigir.
- Preserve os dados.
- Valide também no servidor.
Evite
- Não valide no foco.
- Não interrompa a cada tecla.
- Não acuse erro prematuro.
- Não mova o foco sem ação.
- Não esconda o estado de carregamento.
- Não mantenha erro já corrigido.
- Não dependa só da validação no cliente.
- Não use cor sem texto.
