Erros de formulários

Erros de formulário

Erros de formulário acontecem quando o sistema encontra entradas inválidas e persistem até serem resolvidos.

O design responsável do formulário oferece aos usuários informações contextuais e relevantes para corrigir eventuais erros a fim de atender aos critérios de entrada necessários.

Há dois tipos de erros de formulário: entrada única e entrada de grupo. O tipo afeta como o erro é disparado e exibido.

Tipos de erros de formulário

Erro de entrada único
#Erro de entrada único
  • O tipo mais comum de entrega de erro de formulário é por meio do uso de texto de ajuda em componentes de entrada;
  • Alguns exemplos disso incluem campo de texto, área de texto, grupo de rádio, grupo de caixas de seleção, seletor e caixa de combinação;
  • Qualquer componente de entrada pode potencialmente disparar um erro com uma entrada inválida;
  • Os erros devem ser resolvidos antes que um usuário possa avançar e concluir o formulário com êxito;
  • Quando ocorre uma mensagem de erro, ela alterna o texto de ajuda com o texto de erro em uma entrada.
Erro de entrada de grupo
#Erro de entrada de grupo
  • Quando ocorrem vários erros de entrada em uma página, um alerta em linha agrega as mensagens de erro e aumenta a visibilidade;
  • Coloque esse alerta na parte superior da página ou seção de um formulário;
  • Se um alerta em linha for mostrado com vários erros de entrada únicos, ele persistirá até que todos os erros tenham sido resolvidos.

Tipos de validação de formulário

Validação através de submissão
#Validação através de submissão
  • O tipo mais comum de validação de formulário ocorre quando o usuário envia suas entradas — geralmente selecionando um botão — e o formulário é processado no back-end. Se houver entradas inválidas, o sistema retornará erros de entrada.
Validação em tempo real
#Validação em tempo real
  • A validação em tempo real é onde o formulário não precisa ser enviado para retornar eventuais erros de entrada;
  • Os erros que aparecem em tempo real não devem ser mostrados até que o usuário termine de digitar;
  • Aqui está um exemplo passo a passo de como a validação acontece em tempo real:
    • 1. Campo de texto vazio (estado padrão);
    • 2. O usuário digita uma entrada (campo de texto em foco);
    • 3. Usuário clica fora do campo de texto e ocorre um erro porque a entrada é inválida (campo de texto não em foco);
    • 4. A mensagem de erro e o ícone permanecem enquanto o usuário resolve o erro (campo de texto em foco);
    • 5. À medida que a entrada se torna válida, o erro é resolvido em tempo real (o campo de texto ainda está em.

Diretrizes de uso

Erros ao digitar
#Não mostre erros de entrada até que o usuário termine de digitar
  • Para validação em tempo real, certifique-se de que o usuário tenha terminado completamente de inserir as informações antes de mostrar quaisquer erros de entrada. Mostrar um erro antes de terminar a digitação é frustrante e confuso.
Dicas para etiquetas de obrigatorio ou opcional
#Use um rótulo "(obrigatório)" ou "(opcional)" consistentemente em todo o formulário para ajudar a evitar erros em primeiro lugar
  • Em um único formulário, marque apenas os campos obrigatórios ou apenas os campos opcionais, dependendo do que for menos frequente em todo o formulário;
  • Se a maioria dos campos for opcional, apenas os campos obrigatórios devem receber um ícone de asterisco ou ter rótulos anexados com "(obrigatório)";
  • Se a maioria dos campos for obrigatória, apenas os campos opcionais devem ser anexados com "(opcional)". Nunca use um ícone de asterisco para observar que um campo é opcional.
v1