Validare încorporată și erori UX

1) Principii

1. Îngrijire predictivă, nu pedeapsă. Arătăm cum să introduceți corect, înainte de eroare.
2. Nu pierde date. Orice eroare nu distruge introdus; suport Anulare/Reîncercare.
3. Momentul expunerii.

Înainte de a introduce: text de ajutor (reguli și exemple).
În timpul: sugestii moi/mască/auto-substituție.
După (ceață/trimitere): o eroare clară cu instrucțiunea „cum să remediați”.
4. Atenție economie. Un mesaj este un motiv și o acțiune.
5. Accesibilitate. Text + pictogramă/culoare, link către câmp prin ARIA, se concentreze la primul câmp eronat.

2) Straturi de validare

Client sincron: format, lungime, obligatoriu, mască. Rapid şi ieftin.
Client asincron: unicitate de conectare, verificare BIN/IBAN, indicii API. Cu demascarea.
Camera serverului: reguli de afaceri, limite, notare de risc, autorizare/drepturi. Adevărul ultimei soluţii.
Regulă: chiar și cu o verificare ideală a clientului, serverul confirmă și generează textul final.

3) Temporizări și demontări

Validare pentru blur → feedback instant ≤ 100 ms.
Cec asincron - debit 250-400 ms după oprirea intrării.
Confirmarea succesului - pictograma laconică („Ok”) sau verde; fără „saluturi”.
Pe „trimite” vom afișa lista de erori și se concentreze transfer la primul.

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

4) Erori de copywriting

Șablon: motiv → cum să se stabilească → alternativă (dacă există).

Bun: "Parola este mai scurtă decât 8 caractere. Adăugați mai multe caractere sau utilizați o frază.

Bine: "IBAN nu arata bine. Verificați lungimea și caracterele: A-Z, 0-9"

Rău: „Intrare incorectă”.
Nu da vina pe utilizator; evitați jargonul și codurile.
În zonele sensibile (plăți/ASC), evităm detalii care dezvăluie siguranța.

5) Tiparele de afișare a mesajelor

5. 1 Pe teren (inline)

' aria-invalid =” true”', текст в 'aria-descrise'.
Pe scurt, în mod specific; fără paragrafe lungi.
Culoare + pictogramă, dar semnificație - în text.

5. 2 Mai jos formularul (rezumat)

Listează toate erorile cu ancore de câmp.
Butonul „Du-te la eroare ”/făcând clic pe un element se concentrează.

5. 3 În procesul de trimitere

Blocați apăsarea repetată (starea „ocupat”).
Cu un timeout de 3-5 s - „Așteptând confirmarea”... cu o reluare sigură.

6) Măști, auto-sfaturi și corectoare

Măștile nu trebuie să interfereze cu inserția/editarea. Permiteți intrarea liberă, normalizați sub capotă.
Sfaturi automate: afișați formate de eșantionare, înlocuitor ca un indiciu, nu o parte „necesară”.
Normalizare: tunderea spațiilor, unificarea registrelor, auto-format (de exemplu, „+ 1 (___) ___ - ____”) - dar păstrați versiunea „curată” în datele sursă.

7) Disponibilitate (A11y)

Link: 'etichetă' ↔ 'intrare', erori în 'aria-descripted'.
Critic - 'rol =' alertă '', informaţional - 'rol =' stare ''.
Ne întoarcem concentra la câmpul eronat, „: focus-vizibil” vedem.
Contrast text/pictogramă ≥ AA; sensul nu depinde numai de culoare.

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) Formate internaționale și localizare

Nume/adrese: permit diferite alfabete, lungimi, apostrofuri, cratime.
Date/valute/numere: Utilizați formate de intrare locale și structuri stricte de stocare internă (ISO/numărul de cenți).
Telefon: intrare în format internațional „+ CC”, auto-indiciu de țară.
Limbajul mesajului: scurt, neutru din punct de vedere cultural; stabiliți + 20-30% din lungimea liniei.

9) Securitate și confidențialitate

Nu arătați că contul există/nu există - textul general: „Dacă e-mailul este înregistrat, vom trimite un e-mail”.
Masca date sensibile (PAN, pașaport).
Pe pașii critici (bid/pay) utilizați idempotence și „reluări sigure”.
Jurnale - cu ID-ul de corelare fără PII în mesaje.

10) Economisirea progresului

Draft autosave (local/server).
În caz de eroare de depunere - formularul rămâne completat; sugerat să se repete mai târziu.
Pentru procesele multi-pas (KYC) - Salvați pașii finalizați.

11) Validarea asincronă

Debowns 250-400 ms; arătăm „verificare”... în apropierea câmpului, fără a bloca întregul ecran.
Indicarea clară a succesului/eșecului fără „spasme” ale aspectului.
Timeout de rețea → "Imposibil de verificat. Vrei să continui cu riscul? (dacă este cazul) sau Redo.

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) Formulare de plată și KYC (specificul)

Hărți: format PAN, termen, CVC - validare după cum a fost introdus; erori - fără a divulga motivul respingerii de către bancă.
A2A/wallets: verificarea admisibilității pe țări/limite, texte clare despre comisioane/termene.
KYC: cerințe pas cu pas pentru fotografii/documente, previzualizare, dimensiunea/tipul fișierului, timpul de verificare, confidențialitate.
Joc responsabil: mesajele sunt neutre, cu „Limita de setare „/” Ajutor „acțiuni.

13) Antipattern

Afișați erorile „per caracter” fără debunking.
Resetează formularul de eroare.
„Intrare nevalidă” mesaj fără câmp/regulă.
Informații critice numai prin culoare/pictogramă.
Blocați întreaga pagină pentru a valida un singur câmp.
Absența modului offline și repetări în timpul defecțiunilor de rețea.

14) Proiectarea tokenurilor sistemului (exemplu)

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) Fragmente de implementare

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ăsurători și control

Timp-la-Fix.
Rata de eroare în funcție de câmp și motiv (format/limite/server).
Încercați din nou rata de succes.
Proporția de forme abandonate și adâncimea smoalei.
Plin de solicitări: CTR „Detalii”, frecvența de a ascunde solicitările.

17) Lista de verificare QA

A11y

• Focus trece la primul câmp nevalid; „aria-descriptby ”/„ aria-invalid” set.
• Contrast ≥ AA; mesajele sunt independente doar de culoare.

Comportament

• Validare încorporată cu debunking; erorile apar nu mai devreme de estompare (cu excepția măștilor critice).
• Un rezumat este generat pe trimitere, câmpurile nu sunt eliminate.
• Verificările asincrone nu blochează pagina; există un timeout și o reluare.

Text

• Motiv + cum să se stabilească; fără coduri/vinovăţie.
• Localizarea nu rupe aspectul; exemplele sunt relevante.

Siguranță

• Nu există scurgeri PII în mesaje; nu divulgă existența contului.
• Idempotența pentru operațiunile critice.

18) Documentația în sistemul de proiectare

Componente: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Hărți de reguli pentru câmpurile tipice (e-mail, telefon, parolă, adresă, IBAN, dată).
Ghiduri pentru debunking, verificare asincronă și comportament offline.
Șabloane de text pentru erori frecvente și exemple înainte/după.

Scurt rezumat

Validarea încorporată se referă la îngrijirea predictivă, instrucțiuni clare și atitudine atentă față de date. Verificați local și pe server, afișați erori la momentul potrivit cu acțiuni specifice, respectați disponibilitatea și confidențialitatea, salvați progresul și utilizați debuns. Astfel, formele devin prietenoase, iar greșelile devin rapide și fixabile.