Wbudowane błędy walidacyjne i UX

1) Zasady

1. Opieka predykcyjna, nie kara. Pokazujemy, jak wprowadzić poprawnie, przed błędem.
2. Nie trać danych. Każdy błąd nie niszczy wprowadzonego; wsparcie Anuluj/Retry.
3. Chwila wyświetlania.

Przed wprowadzeniem: tekst pomocnika (zasady i przykłady).
Podczas: miękkie wskazówki/maska/auto-substytucja.
Po (rozmycie/przesłanie): jasny błąd z instrukcją „jak naprawić”.
4. Ekonomia uwagi. Jedna wiadomość to jeden powód i jedna akcja.
5. Dostępność. Tekst + ikona/kolor, link do pola poprzez ARIA, skupić się na pierwszym błędnym polu.

2) Warstwy walidacyjne

Synchroniczny klient: format, długość, obowiązkowy, maska. Szybko i tanio.
Asynchroniczny klient: unikalność logowania, sprawdzanie BIN/IBAN, wskazówki API. Z debunkingiem.
Serwer: zasady biznesowe, limity, ocena ryzyka, autoryzacja/prawa. Prawda w ostateczności.
Zasada: nawet przy idealnym sprawdzeniu klienta serwer potwierdza i generuje ostateczny tekst.

3) Terminy i spłaty

Walidacja dla rozmazania → natychmiastowa informacja zwrotna ≤ 100 ms.
Asynchroniczna kontrola - obciążenie 250-400 ms po zatrzymaniu wejścia.
Potwierdzenie sukcesu - lakoniczna („Ok”) lub zielona ikona; bez „pozdrowienia”.
Na 'submit' pokazujemy listę błędów i przenieść ostrość na pierwszy.

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

4) Błędy w kopiowaniu

Szablon: powód → jak naprawić → alternatywa (jeśli istnieje).

Dobrze: "Hasło jest krótsze niż 8 znaków. Dodaj więcej znaków lub użyj frazy.

Dobrze: "IBAN nie wygląda dobrze. Sprawdź długość i znaki: A-Z, 0-9"

Źle: „Nieprawidłowe wejście”.
Nie obwiniaj użytkownika; unikać żargonu i kodów.
W obszarach wrażliwych (płatności/ASC) unikamy szczegółów ujawniających bezpieczeństwo.

5) Wzory wyświetlania wiadomości

5. 1 W polu (inline)

'aria-invalid =' true ', текса' aria-descredby '.
Krótko mówiąc, konkretnie; bez długich ustępów.
Kolor + ikona, ale znaczenie - w tekście.

5. 2 Poniżej formularz (streszczenie)

Wymienia wszystkie błędy z kotwicami polowymi.
Przycisk „Przejdź do błędu ”/kliknięcie na przedmiot powoduje przesunięcie ostrości.

5. 3 W procesie wysyłania

Zablokuj powtarzane naciśnięcie (stan „zajęty”).
Z czasem 3-5 s - „Czekamy na potwierdzenie”... z bezpieczną powtórką.

6) Maski, automatyczne końcówki i korektory

Maski nie powinny zakłócać wprowadzania/edycji. Darmowe wejście, normalizacja pod kapturkiem.
Auto-porady: pokazać formaty próbki, łożysko jako wskazówka, a nie „wymaganą” część.
Normalizacja: spacje przycinania, rejestry unifikacyjne, autoformat (na przykład '+ 1 (___) ___ - ____') - ale zachowaj „czystą” wersję w danych źródłowych.

7) Dostępność (A11y)

Link: 'label', 'input', błędy w 'aria-descripedby'.
Critical - 'role =' alert '', informacyjny - 'role =' status ''.
Zwracamy uwagę na błędne pole, ': focus-visible' widzimy.
Kontrast tekstu/ikony ≥ AA; znaczenie nie zależy tylko od koloru.

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) Formaty międzynarodowe i lokalizacja

Nazwy/adresy: pozwalają na różne alfabety, długości, apostrofy, łączniki.
Daty/waluty/numery: Użyj lokalnych formatów wejściowych i ścisłych wewnętrznych struktur pamięci masowej (ISO/liczba centów).
Telefon: wejście w formacie międzynarodowym '+ CC', automatyczna wskazówka według kraju.
Język wiadomości: krótki, kulturowo neutralny; ustawić + 20-30% długości linii.

9) Bezpieczeństwo i prywatność

Nie pokazuj, że konto istnieje/nie istnieje - tekst ogólny: „Jeśli e-mail jest zarejestrowany, wyślemy e-mail”.
Dane wrażliwe na maskę (PAN, paszport).
Na krytycznych krokach (oferta/płatność) używać idempotencji i „bezpieczne powtórki”.
Dzienniki - z identyfikatorem korelacji bez PII w wiadomościach.

10) Oszczędność postępu

Projekt autosave (lokalny/serwer).
W przypadku błędu złożenia - formularz pozostaje wypełniony; zasugerował powtórzenie później.
Dla procesów wielostopniowych (KYC) - Zapisz zakończone kroki.

11) Walidacja asynchroniczna

Debowns 250-400 ms; pokazujemy „sprawdź”... w pobliżu pola bez blokowania całego ekranu.
Wyraźne wskazanie sukcesu/niepowodzenia bez „drgania” układu.
Network timeout → "Nie można zweryfikować. Chcesz kontynuować ryzyko? (w stosownych przypadkach) lub 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) Formularze płatnicze i KYC (dane szczegółowe)

Mapy: format PAN, termin, CVC - walidacja wprowadzona; błędy - bez ujawniania przyczyny odrzucenia przez bank.
A2A/wallets: weryfikacja dopuszczalności według kraju/limitów, jasne teksty dotyczące prowizji/terminów.
KYC: wymagania krok po kroku dla zdjęć/dokumentów, podgląd, rozmiar/typ pliku, czas weryfikacji, prywatność.
Odpowiedzialna gra: wiadomości są neutralne, z akcjami „Ustaw limit „/” Pomoc „.

13) Antypattery

Pokaż błędy „per character” bez debunkingu.
Resetuje formularz na błędzie.
Komunikat „Nieprawidłowy wpis” bez pola/reguły.
Informacje krytyczne tylko według koloru/ikony.
Zablokuj całą stronę, aby zatwierdzić jedno pole.
Brak trybu offline i powtórzeń podczas awarii sieci.

14) Żetony systemu projektowania (przykład)

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) Snippety wdrożeniowe

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) Metryka i kontrola

Czas do naprawy.
Wskaźnik błędów według pola i powodu (format/limity/serwer).
Powtórny wskaźnik sukcesu.
Odsetek opuszczonych kształtów i głębokość skoku.
Pełen zapytań: CTR „Szczegóły”, częstotliwość ukrywania prompts.

17) Lista kontrolna QA

A11y

• Focus przenosi się do pierwszego nieprawidłowego pola; 'aria-described by '/' aria-invalid' set.
• Kontrast ≥ AA; wiadomości są niezależne tylko od koloru.

Zachowanie

• Wbudowana walidacja z debunkingiem; błędy pojawiają się nie wcześniej niż rozmycie (z wyjątkiem masek krytycznych).
• Streszczenie jest generowane na formularzu, pola nie są rozliczane.
• Asynchroniczne kontrole nie blokują strony; jest czas i powtórka.

Tekst

• Powód + jak naprawić; brak kodów/winy.
• Lokalizacja nie łamie układu; przykłady są istotne.

Bezpieczeństwo

• Brak wycieków PII w wiadomościach; nie ujawniają istnienia rachunku.
• Idempotencja dla operacji krytycznych.

18) Dokumentacja w systemie projektowym

Komponenty: 'Mały błąd', 'FormSummary', 'HelperText', 'BusyButton'.
Mapy reguł dla typowych pól (e-mail, telefon, hasło, adres, IBAN, data).
Przewodniki do debunkingu, asynchronicznego sprawdzania i zachowania offline.
Szablony tekstowe dla częstych błędów i przed/po przykładach.

Krótkie podsumowanie

Wbudowana walidacja dotyczy opieki predykcyjnej, jasnych instrukcji i ostrożnego podejścia do danych. Sprawdź lokalnie i na serwerze, pokaż błędy we właściwym czasie z konkretnymi działaniami, szanuj dostępność i prywatność, zapisuj postępy i wykorzystuj debundy. Tak więc formy stają się przyjazne, a błędy stają się szybkie i możliwe do naprawienia.