Como preservar dados após um erro no formulário

Aprenda a preservar dados preenchidos após erros de validação e orientar a correção sem obrigar a pessoa a recomeçar.

Formulário com dois valores preservados e um campo destacado por erro
Nível de impácto
Alto
Status
Recomendado
Nível de evidênica
Forte evidência

Contexto

Quando um formulário falha, a pessoa não deveria perder o que já conseguiu preencher. O sistema deve preservar os valores válidos e pedir correção apenas do que está errado.

Preservar dados não significa guardar tudo indefinidamente. Mantenha o preenchimento durante a recuperação da tarefa, com proteção adequada, e trate senhas, códigos de segurança e arquivos de acordo com suas regras de segurança.

Após um erro de validação, mostre o formulário novamente com os textos, seleções e opções válidas preservados. Destaque apenas os campos que precisam de correção. Não reinicie a tarefa inteira por causa de um erro localizado.

Explique o problema em um resumo no início e repita a mensagem junto ao campo. Faça o resumo apontar para os controles correspondentes e mantenha rótulo, valor e instrução visíveis para que a pessoa consiga revisar o que digitou.

Em formulários longos ou divididos em etapas, preserve os dados enquanto a tarefa estiver ativa e durante tentativas de recuperação. Em falhas temporárias, permita tentar novamente sem apagar a entrada; em recarregamentos inevitáveis, restaure os dados não sensíveis de forma segura.

Separe recuperação de usabilidade de retenção permanente. Não mantenha senhas ou códigos de segurança de cartão após a autorização. Para pagamentos, use o fluxo e a tokenização do provedor; o PCI SSC proíbe armazenar códigos de verificação após a autorização. Preserve os demais dados quando a política de segurança permitir.

Checkout da Apple mantém dados do cartão preenchidos enquanto o campo First Name apresenta erro
Exemplo real — Apple, documentado pelo Baymard Institute: os dados do cartão permanecem preenchidos enquanto o campo First Name apresenta erro. A captura mostra como preservar o contexto e permitir a correção localizada. Fonte: Baymard, “Retain Data in Sensitive Credit Card Fields after Validation Errors”: https://baymard.com/blog/preserve-card-details-on-error

Porque isso importa?

Apagar o formulário transforma um erro localizado em trabalho repetido. A pessoa precisa lembrar, localizar e redigitar informações que já estavam corretas, o que aumenta esforço, frustração e abandono.

Em testes de checkout, o Baymard observou que dados de cartão apagados após erros em outros campos levaram participantes a abandonar a tarefa. O estudo também descreve que manter os dados permite revisar o valor e corrigir somente o campo inválido.

A preservação também favorece acessibilidade e recuperação cognitiva. O W3C considera boa prática manter preenchidos os campos sem erro, e orienta que o resumo identifique os controles, ofereça links e mova o foco de forma previsível. Preservar dados, porém, deve respeitar segurança, privacidade e o tempo de vida da sessão.

  • Depois de uma validação com erro.
  • Ao retornar uma resposta do servidor.
  • Em formulários longos.
  • Em etapas com voltar e avançar.
  • Após falhas temporárias e tentativas.
  • Quando um campo depende de outro.
  • Em tarefas com dados difíceis de redigitar.
  • Quando o valor puder ser mantido com segurança.
  • Para senhas e códigos de segurança após autorização.
  • Após a pessoa escolher limpar ou cancelar.
  • Quando a sessão expirar.
  • Em outro usuário ou contexto de acesso.
  • Para arquivos que o navegador não permite repopular.
  • Quando a política de segurança exigir descarte.
  • Ao transformar valores sem avisar.
  • Quando o dado não pertence à tarefa atual.

Recomendações

Faça

Práticas recomendadas
  • Preserve textos válidos.
  • Preserve seleções.
  • Marque só o campo inválido.
  • Mostre resumo com links.
  • Mantenha rótulos visíveis.
  • Retorne o foco previsivelmente.
  • Permita tentar de novo.
  • Proteja o rascunho ativo.
  • Explique descartes necessários.
Wireframe de formulário que preserva os campos válidos e destaca apenas um erro
Exemplo correto — imagem didática criada para a CamaraUX: os valores válidos continuam preenchidos e apenas o campo inválido recebe destaque. Não é uma captura de produto real.

Evite

Práticas a evitar
  • Não limpe o formulário inteiro.
  • Não apague campos válidos.
  • Não exija redigitação global.
  • Não esconda a causa.
  • Não persista senha ou CVV.
  • Não repopule arquivos automaticamente.
  • Não confunda erro técnico com validação.
  • Não altere o formato em silêncio.
Wireframe de formulário vazio após um erro localizado, representando perda de dados
Exemplo incorreto — imagem didática criada para a CamaraUX: um único erro limpa o formulário e obriga a pessoa a refazer o preenchimento. Não é uma captura de produto real.

Acessibilidade

Quando o envio falhar, informe o erro em texto, mostre um resumo no início e associe cada mensagem ao seu controle com aria-describedby. Use aria-invalid="true" no campo inválido quando aplicável. O resumo pode receber o foco ou ser usado para levar a pessoa ao primeiro erro, sem alterar a ordem do formulário.

Preserve o valor e a seleção de cada controle que não apresenta erro. Não dependa apenas de cor, borda ou ícone. Mantenha rótulos, instruções e mensagens disponíveis para zoom, teclado, leitores de tela e telas pequenas.

Se o preenchimento for salvo durante uma etapa, proteja o rascunho, limite sua duração e deixe claro quando ele será descartado. Não revele nem restaure segredos de forma indevida. Teste falha de validação, recarregamento, expiração, tentativa novamente, leitor de tela, zoom, teclado, mobile e conexão lenta.

Checklist

  • Os campos válidos permanecem preenchidos?
  • As seleções e opções são preservadas?
  • Apenas o campo inválido é destacado?
  • O resumo aponta para os campos?
  • A mensagem explica como corrigir?
  • O rótulo continua visível com o valor?
  • O foco retorna de forma previsível?
  • A mensagem está associada ao controle?
  • É possível tentar novamente sem perder dados?
  • O servidor restaura dados não sensíveis com segurança?
  • Senhas e códigos de segurança não são retidos indevidamente?
  • O descarte após cancelar ou expirar é explicado?
  • Arquivos têm um fluxo claro para nova seleção?
  • A solução foi testada com teclado, leitor de tela, zoom, mobile e conexão lenta?

Referências

  • Baymard Institute — Retain Data in Sensitive Credit Card Fields after Validation Errors. Pesquisa de checkout que relata frustração e abandono quando dados de cartão são apagados após erros em outros campos; também documenta a Apple mantendo os dados enquanto “First Name” apresenta erro. A evidência é específica de checkout e não deve ser generalizada sem teste no contexto do produto. Consultar a pesquisa.
  • Baymard Institute — Preserving User Input When Errors Occur, guideline #720. Registra como problema de UX a perda de textos e seleções por erro de validação ou falha técnica. A página pública informa que os detalhes da recomendação fazem parte do conteúdo Premium. Consultar a diretriz.
  • W3C WAI — Easy Checks: Forms, labels, and errors. Orienta verificar se os campos sem erro continuam preenchidos e afirma que as pessoas não deveriam redigitar todas as informações, com exceção de dados sensíveis como números de cartão. Consultar a orientação.
  • W3C WAI — User Notification. Recomenda resumo de erros com referência ao rótulo, instrução de correção, links para os controles e associação da mensagem por aria-describedby. Também apresenta o foco no primeiro campo com erro como opção conveniente. Consultar o tutorial.
  • W3C — WCAG 2.2, Success Criterion 3.3.1: Error Identification. Exige que o erro de entrada seja identificado e descrito em texto; a técnica não determina um único layout, mas orienta a comunicar qual controle precisa de correção. Consultar o critério.
  • GOV.UK Design System — Recover from validation errors. Recomenda mostrar a página novamente com os campos como foram preenchidos, manter as respostas que falharam para permitir edição e evitar redigitação, além de apresentar resumo e mensagens junto aos campos. A referência é usada aqui pela orientação de recuperação, não como exemplo visual. Consultar o padrão.
  • PCI Security Standards Council — FAQ 1280: Can card verification codes be stored? Esclarece que códigos de verificação de cartão não podem ser retidos após a autorização; a regra de preservação deve distinguir recuperação temporária de armazenamento permanente. Consultar a FAQ.
  • Padrão Digital de Governo — Input. Mostra como mensagens contextuais podem acompanhar o campo e ser associadas programaticamente, reforçando que preservar o valor só é útil quando a pessoa também consegue identificar e corrigir o erro. Consultar o componente.
Veja também

Esta recomendação foi útil para você?