Contexto
Quando um formulário falha, a pessoa precisa descobrir três coisas sem procurar: que existe um erro, qual campo está envolvido e como corrigi-lo. Por isso, a posição da mensagem deve acompanhar o campo e a sequência de leitura, e não ficar isolada em um alerta distante.
Não há uma resposta universal para “antes ou depois”. Em campos simples, mantenha a mensagem imediatamente ligada ao grupo do campo, em posição consistente. Após o envio, combine o resumo no topo com a mensagem local; durante o preenchimento, espere um momento adequado, como a tentativa de avançar.
Para cada erro, mantenha a mensagem na mesma unidade visual do rótulo, da instrução e do controle. Em muitos padrões, ela fica depois do rótulo e da ajuda e antes do campo; o importante é ser percebida na sequência, manter uma posição consistente e estar associada programaticamente. Para grupos de radio buttons ou checkboxes, coloque-a junto à pergunta e ao grupo.
Depois do envio, mostre um resumo de erros no topo da área principal e repita cada mensagem junto ao campo. Faça cada item do resumo apontar para o controle correspondente e leve o foco ao resumo ou ao primeiro erro. Use o mesmo texto nas duas camadas.
Evite validar um campo vazio no foco ou a cada tecla. Para a maioria dos campos, valide ao tentar avançar ou enviar. Use feedback durante o preenchimento somente quando a regra e o contexto justificarem a resposta imediata, sem interromper a entrada. Quando o valor ficar válido, remova o erro; preserve os dados e não obrigue a pessoa a preencher tudo novamente.
Porque isso importa?
Uma mensagem distante obriga a pessoa a lembrar o erro, procurar o campo e descobrir o que fazer. A proximidade reduz esse esforço, enquanto o resumo ajuda a localizar problemas em formulários longos ou quando a página retorna ao topo.
A base não é uma preferência visual isolada. O W3C exige que o item com erro seja identificado e que o erro seja descrito, mas não determina uma única posição: resumo, mensagem inline ou combinação podem ser adequados conforme o contexto. A solução precisa preservar a relação visual e programática entre mensagem e controle.
Em testes de checkout, a Baymard observou que a validação inline evita parte da surpresa de descobrir erros somente após o envio, mas também alerta contra validação prematura. Portanto, o padrão deve equilibrar localização, momento, clareza e recuperação, em vez de escolher apenas “antes” ou “depois”.
Quando usar?
- Após a tentativa de enviar ou avançar.
- Quando feedback durante o preenchimento evitar um erro previsível sem interromper a tarefa.
- Quando houver vários erros na mesma página.
- Em formulários longos, com resumo navegável no topo.
- Quando cada mensagem puder apontar para o campo correspondente.
- Quando a validação assíncrona puder confirmar a resposta sem bloquear a tarefa.
Quando evitar?
- Ao focar um campo ainda vazio.
- A cada tecla, sem uma necessidade clara.
- Como resposta automática e punitiva ao sair de qualquer campo.
- Como um alerta distante e sem vínculo com o campo.
- Com apenas “inválido” ou “erro”.
- Somente por cor, ícone ou posição.
- Quando o problema for de elegibilidade e exigir uma explicação própria.
Recomendações
Faça
- Mantenha a mensagem junto ao campo.
- Preserve rótulo e instrução.
- Mostre resumo no topo após o envio.
- Vincule o resumo aos campos.
- Repita o mesmo texto.
- Explique o problema e a correção.
- Valide no momento adequado.
- Remova o erro quando corrigido.
- Preserve os dados.
Evite
- Não deixe o erro isolado.
- Não valide no foco.
- Não interrompa a cada tecla.
- Não valide ao sair por regra automática.
- Não use texto genérico.
- Não dependa só da cor.
- Não esconda a mensagem em tooltip.
- Não apague os dados.
- Não duplique textos conflitantes.
- Não perca o foco.
