Convalida integrata e errori UX

1) Principi

1. Aiuto predittivo, non punizione. Ti mostriamo come immettere correttamente, prima dell'errore.
2. Non perdere i dati. Qualsiasi errore non distrugge l'immissione; Supporta/Ripeti.
3. È il momento della proiezione.

Prima di immettere: helper text (regole e esempi).
Durante: hints morbidi/maschera/sostituzione automatica.
Dopo (blur/sottomit) - Errore netto con l'istruzione «come correggere».
4. Risparmio di attenzione. Un solo messaggio è una causa e un'azione.
5. Disponibilità. Testo + icona/colore, collegamento al campo attraverso ARIA, attivazione al primo campo non valido.

2) Livelli di validazione

Formato, lunghezza, obbligatorietà, maschera. Veloce e economica.
Asincrona client: login univoco, controllo BIN/BAN, suggerimenti API. Con il debount.
Server: regole aziendali, limiti, rischio-scorrimento, autorizzazioni/diritti. La verità di ultima istanza.
Regola: anche con un controllo client perfetto, il server conferma e crea il testo finale.

3) Timing e debouns

La validazione in blur è un Fidbeck istantaneo di 100 mc.
Controllo asincrono - Debouns 250-400 ms dopo aver interrotto l'input.
La prova di successo è concisa (OK) o un'icona verde; Niente fuochi d'artificio.
Sù sottomit "mostra l'elenco degli errori e spostiamo il fuoco al primo.

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

4) Copiratting degli errori

Modello: il motivo per cui è possibile correggere l'alternativa .

Ok, "Password più breve di 8 caratteri. Aggiungete altri caratteri o usate la frase".
Ok, "IAN non sembra corretto. Controllare la lunghezza e i caratteri A-Z, 0-9".
Male, «input sbagliato».
Non dare la colpa all'utente; evitate gergo e codici.
In zone sensibili (pagamenti/CUS) evitare dettagli che rivelano la sicurezza.

5) Cartelli di visualizzazione dei messaggi

5. 1 Al campo (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
In breve, nello specifico; senza paragrafi lunghi.
Colore + icona, ma il significato è il testo.

5. 2 Sotto forma (summary)

Elenca tutti gli errori di ancoraggio ai campi.
Il pulsante «Vai a un errore »/click per voce sposta il fuoco.

5. 3 In fase di invio

Blocca nuovamente la pressione (state'busy ').
Durante il timeout 3-5 c - «In attesa di conferma»... con ripetizione sicura.

6) Maschere, fiabe automatiche e regolatori

Le maschere non devono interferire con l'inserimento o la modifica. Autorizzate l'immissione libera, regolate sotto il cofano.
Suggerimenti: mostra esempi di formati, placeholder come suggerimento e non come parte obbligatoria.
Normalizzazione: Spazi trimming, unificazione dei registri, formato auto (ad esempio, «+ 1 ( ) -»), ma conserva la versione «pulita» nei dati originali.

7) Disponibilità (A11y)

Collegamento «label» «input», errori in «aria-describedby».
Critici: «role =» alert «,» role = «status».
Riattiviamo il campo sbagliato, 'focus-visibile'vediamo.
Contrasto testo/icone AA; Il significato non dipende solo dal colore.

html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id = "email-help "> For example, user @ domain. tld</small>
<p id = "email-err" class =" field-error" role = "alert" hidden> Check email format </p>

8) Formati internazionali e localizzazione

Nomi/indirizzi: ammettere alfabeti diversi, lunghezze, apostrofi, defisi.
Data/valuta/numeri: utilizzare formati di input locali e strutture di conservazione interne rigorose (ISO/centesimi).
Telefono: input in formato internazionale «+ CC», una favola in giro per il paese.
Il linguaggio dei messaggi è breve, culturalmente neutrale; piazzare + 20-30% della lunghezza della riga.

9) Sicurezza e privacy

Non mostrare che un account esiste/non esiste - il testo condiviso è: «Se il email è registrato, invieremo un messaggio».
Maschera i dati sensibili (PAN, passaporto).
Per i passaggi critici (tasso/pagamento), utilizzare Idampotence e «ripetizioni sicure».
Loghi - Con ID di correlazione senza PII nei messaggi.

10) Mantenere il progresso

Scrivi automaticamente la bozza (locale/server).
In caso di errore di invio, il modulo rimane compilato. suggerisce una ripetizione più tardi.
Per i processi a più livelli (KYC) - Salvare i passaggi completati.

11) Convalida asincrona

Debouns 250-400 ms; mostra «controlliamo»... vicino al campo senza bloccare l'intero schermo.
Una chiara indicazione di successo/disattivazione senza «fluttuazioni» del layout.
Timeout della rete "Impossibile controllare. Continuare con il rischio?" (se valido) o Ripeti.

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) Moduli di pagamento e KYC (specificità)

Mappe: formato PAN, data di scadenza, CVC - convalida al momento dell'immissione; errori - senza rivelazione del motivo del rifiuto da parte della banca.
A2A/portafogli: verifica dell'ammissibilità nazionale/limitata, testi chiari su commissioni/scadenze.
KYC: requisiti passaggi per foto/documenti, anteprima, dimensioni/tipo di file, tempi di convalida, privacy.
Gioco responsabile: i messaggi sono neutrali, con le azioni Imposta limite/Aiuto.

13) Antipattern

Mostra gli errori per ogni carattere senza debount.
Ripristina il modulo in caso di errore.
Messaggio Input non valido senza specificare un campo o una regola.
Informazioni critiche solo colore/icona.
Blocca l'intera pagina per controllare un campo.
Nessuna modalità off-line o ripetizione in caso di guasti di rete.

14) Token di progettazione (esempio)

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) Snippet di implementazione

js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)         "Check email format"
};
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: "This email is not available. Please select another. ";
} catch {
return "Failed to validate. Repeat later. ";
}
}

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) Metriche e controllo

Time-to-Fix (tempo compreso tra errore e correzione).
Errore rate per campi e motivi (formato/limiti/server).
Invia nuovamente (retry success rate).
Percentuale di forme abbandonate e profondità del passo.
Suggerimenti: CTR Più informazioni, frequenza di suggerimenti nascosti.

17) Lista assegni QA

A11y

• Il trucco passa al primo campo sbagliato; 'aria-describedby'/' aria-invalid'.
• Contrasto dell'AA; i messaggi non dipendono solo dal colore.

Comportamento

• Validazione integrata con debount; gli errori non compaiono prima di blur (tranne maschere critiche).
• Sul sottomit viene generato un dashboard e i campi non vengono cancellati.
• I controlli asincroni non bloccano la pagina; C'è un timeout e una ripetizione.

Testo

• Motivo + come correggere; senza codici o colpe.
• La localizzazione non rompe il layout. esempi sono aggiornati.

Protezione

• Nessuna fuoriuscita di PII nei messaggi; Non riveliamo l'esistenza di un account.
• Idampotenza per operazioni critiche.

18) Documentazione in progettazione

Componenti: «FieldError», «FormSummary», «HelperText», «BusyButton».
Mappe delle regole per i campi tipici (email, telefono, password, indirizzo, BAN, data).
Guidi per debouns, controllo asincrona e comportamento off-line.
Modelli di testo per errori frequenti e esempi precedenti/successivi.

Breve riepilogo

La convalida integrata riguarda l'aiuto predittivo, le istruzioni chiare e la cura dei dati. Controllare localmente e sul server, visualizzare gli errori al momento opportuno con azioni specifiche, rispettare la disponibilità e la privacy, mantenere i progressi e utilizzare debouns. Così le forme diventano amichevoli e gli errori sono rapidi e riparabili.