Validação incorporada e erro UX

1) Princípios

1. Ajuda preditiva, não punição. Mostramos como digitar corretamente, antes do erro.
2. Não perca dados. Qualquer erro não destrói o que foi digitado; Apoiamos Cancelar/Repetir.
3. O momento da exibição.

Antes de digitar: helper text (regras e exemplos).
Durante: hints macios/máscara/substituição automática.
Depois (blur/submit): erro claro com a instrução «como corrigir».
4. Poupança de atenção. Uma mensagem é uma causa e uma ação.
5. Disponibilidade. Texto + ícone/cor, ligação com o campo via ARIA, foco para o primeiro campo errado.

2) Camadas de validação

Sincronizado do cliente: formato, comprimento, obrigatoriedade, máscara. Rápida e barata.
Assíncrona cliente: login exclusivo, teste BIN/IBAN, dicas API. Com debouns.
Regras de negócios, limites, risco, permissão/permissão. Verdade de última instância.
Regra: mesmo com a verificação perfeita do cliente, o servidor confirma e forma o texto final.

3) Timing e debouns

Validação em blur instantânea fidbeck 100 ms.
Verificação Asincrona - Debouns 250-400 ms após parar a entrada.
Prova de sucesso: conciso (OK) ou ícone verde; sem «Salgueiros».
Em 'submit', mostramos a lista de erros e movemos o foco para a primeira.

js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}

4) Copiar erros

Modelo: razão → como corrigir → alternativa (se houver).

"A senha é mais curta do que 8 caracteres. Adicione mais caracteres ou use a frase".
Certo, "O IBAN não parece correto. Verifique o comprimento e os caracteres A-Z, 0-9".
«Digitação errada».
Não culpe o usuário; evite jargões e códigos.
Em zonas sensíveis (pagamentos/CUS), evitamos detalhes que revelam a segurança.

5) Pattern de exibição de mensagens

5. 1 Junto ao campo (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Breve, especificamente; sem parágrafos longos.
Cor + ícone, mas o sentido é o texto.

5. 2 Sob o uniforme (summary)

Lista todos os erros com âncoras de campo.
O botão Ir ao erro/clique por item move o foco.

5. 3 No processo de envio

Bloqueie novamente (state 'busy').
Com o tempo 3-5 s - «Aguardando confirmação»... com uma repetição segura.

6) Máscaras, contos automáticos e corretivos

As máscaras não devem interferir na inserção/edição. Permita a entrada livre, normalize sob o capô.
Contos automáticos: mostre exemplos de formatos, o placeholder como uma dica e não como uma parte «obrigatória».
Normalização: trimming espaços, unificação de registros, formato automático (por exemplo, '+ 1 (___) ___ - ____') - mas mantenha a versão limpa nos dados originais.

7) Disponibilidade (A11y)

Ligação: 'label' ↔ 'input', erros em 'aria-describedy'.
Os críticos são 'role =' alert ', as informações são' role = 'status'.
Voltamos o foco para o campo errado, 'focus-visível'.
Contraste texto/ícone ≥ AA; O significado não depende apenas da cor.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>

8) Formatos internacionais e localização

Nomes/endereços: admita alfabetos diferentes, comprimentos, apóstrofos, defeitos.
Datas/moedas/números: Use formatos de entrada locais e estruturas de armazenamento internas rigorosas (ISO/cêntimos).
Telefone: entrada no formato internacional de «+ CC», contação automática pelo país.
Linguagem das mensagens: curtas, culturalmente neutras; coloque + 20% a 30% de comprimento de linha.

9) Segurança e privacidade

Não mostre que a conta existe/não existe - o texto geral é: «Se o email estiver registrado, nós enviaremos um e-mail».
Disfarce dados sensíveis (PAN, passaporte).
Em etapas críticas (taxa/pagamento), use idempotidade e «repetições seguras».
Logi - com ID de correlação sem PII nas mensagens.

10) Manter o progresso

Sessão automática do rascunho (local/servidor).
Se o envio falhar, o formulário permanece preenchido; será oferecida uma repetição mais tarde.
Em processos multifacetados (KYC): mantenha os passos completos.

11) Validação asíncrona

Debouns 250-400 ms; mostramos «verificamos»... perto do campo sem bloquear a tela inteira.
Um indicador claro de sucesso/não-êxito sem o layout.
Timeout da rede → "Não foi possível verificar. Continuar com o risco?" (se for válido) ou «Repetir».

js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);

12) Formulários de pagamento e KYC (especificidades)

Mapas: formato PAN, prazo, CVC - validação conforme digitação; erros - sem revelar o motivo do desvio do banco.
A2A/carteiras: verificação da validade nacional/limite, textos claros sobre comissões/prazos.
KYC: exigências passo a passo para fotos/documentos, pré-teste, tamanho/tipo de arquivo, data de verificação, privacidade.
Jogo responsável: mensagens neutras, com as ações «Definir limite «/« Ajuda ».

13) Antipattern

Mostra os erros de cada símbolo sem debouns.
Redefinir formulário em erro.
Mensagem «Entrada errada» sem especificação de campo/regra.
Informações críticas apenas cor/ícone.
Bloquear toda a página para verificar um campo.
Não há modo off-line ou repetições de falhas de rede.

14) Sistema de design de tokens (exemplo)

json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}

15) Snippets de implementação

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)          "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}

ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}

js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));

16) Métricas e controle

Time-to-Fix (tempo entre erro e correção).
Erro rate por campos e razões (formato/limite/servidor).
Novo envio (retry sucess rate).
Proporção de formas abandonadas e profundidade do passo.
Informações: CTR «Mais», frequência de dicas ocultas.

17) QA-folha de cheque

A11y

• O foco vai para o primeiro campo errado; 'aria-describedy '/' aria-invalid' está exposto.
• Contraste ≥ AA; as mensagens não dependem apenas da cor.

Comportamento

• Validação embutida com debouns; os erros não aparecem antes do blur (exceto máscaras críticas).
• O submit forma um resumo e não limpa os campos.
• Verificações de asincrona não bloqueiam a página; Há um tempo e uma repetição.

Texto

• Razão + como corrigir; sem códigos ou culpa.
• A localização não quebra o layout; exemplos são relevantes.

Segurança

• Não há vazamentos de PII nas mensagens; não revelamos a existência da conta.
• Idempotidade para operações críticas.

18) Documentação em design

Componentes: «FieldError», «FormSummary», «HelperText», «BusyButton».
Mapas de regras para campos típicos (email, telefone, senha, endereço, IBAN, data).
Guida por debouns, verificação asíncrona e comportamento off-line.
Modelos de texto para erros frequentes e exemplos de antes/depois.

Resumo breve

A validação integrada é sobre assistência preditiva, instruções claras e cuidado com os dados. Verifique localmente e no servidor, mostre erros no momento certo com ações específicas, respeite a disponibilidade e privacidade, mantenha o progresso e use o debouns. As formas tornam-se amigáveis e os erros rápidos e reparáveis.