Daxili validasiya və UX səhvləri

1) Prinsiplər

1. Təxmini yardım, cəza deyil. Səhv əvvəl düzgün daxil necə göstərilir.
2. Məlumatları itirməyin. Hər hansı bir səhv daxil edilmiş məhv deyil; «Ləğv et «/» Təkrar et ».
3. Ekran anı.

Daxil edilməzdən əvvəl: helper text (qaydalar və nümunələr).
Zamanı: yumşaq hintlər/maska/avtomatik əvəzləmə.
Sonra (blur/submit): «necə düzəldilir» təlimatı ilə aydın səhv.
4. Diqqət qənaət. Bir mesaj - bir səbəb və hərəkət.
5. Əlçatanlıq. Mətn + ikon/rəng, ARIA vasitəsilə sahə ilə əlaqə, ilk səhv sahəyə diqqət.

2) Validasiya qatları

Müştəri sinxron: format, uzunluq, məcburiyyət, maska. Sürətli və ucuz.
Müştəri asenxron: unikallıq login, BIN/IBAN yoxlama, API ipuçları. Debauns ilə.
Server: biznes qaydaları, limitlər, risk-skor, avtorizasiya/hüquqlar. Sonuncu instansiyanın həqiqəti.
Qayda: hətta mükəmməl müştəri yoxlaması ilə server son mətni təsdiqləyir və formalaşdırır.

3) Tayminq və debauns

blur → ani fidbek üçün validasiya ≤ 100 ms.
Asinxron yoxlama - giriş dayandırıldıqdan sonra debauns 250-400 ms.
Müvəffəqiyyətin təsdiqi - lakonik («Ok») və ya yaşıl ikona; «Salam» olmadan.
'submit' -də səhvlərin siyahısını göstəririk və fokusu birinciyə keçiririk.

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

4) Səhvlərin kopyalanması

Şablon: səbəb → necə düzəltmək → alternativ (əgər varsa).

Yaxşı: "Şifrə 8 simvoldan qısadır. Daha çox simvol əlavə edin və ya bir ifadə istifadə edin".
Yaxşı: "IBAN düzgün görünmür. Uzunluğunu və simvollarını yoxlayın: A-Z, 0-9".
Pis: «Səhv giriş».
İstifadəçini günahlandırmayın; Jarqon və kodlardan qaçın.
Həssas zonalarda (ödənişlər/KUS) təhlükəsizliyi aşkar edən detallardan qaçırıq.

5) Mesaj nümayiş nümunələri

5. 1 Sahədə (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Qısa, xüsusi; uzun paragraflar olmadan.
Rəng + ikona, lakin mənası mətndədir.

5. 2 Forma altında (summary)

Bütün xətaların siyahısı.
«Xətaya get» düyməsi/nöqtəyə basın fokusu köçürür.

5. 3 Göndərmə prosesində

Yenidən basmağı bloklayın (state 'busy').
3-5 saniyədə - «Təsdiq gözləyirik»... təhlükəsiz təkrarla.

6) Maskalar, avtomatik ipuçları və korrektorlar

Maskalar əlavə/redaktəyə mane olmamalıdır. Pulsuz girişə icazə verin, kapot altında normallaşdırın.
Avtomatik ipuçları: «məcburi» hissə deyil, ipucu kimi placeholder formatlarının nümunələrini göstərin.
Normallaşma: boşluqların trimming, registrlərin unifikasiyası, avtoformat (məsələn, '+ 1 (___) ___ - ____') - lakin ilkin məlumatlarda «təmiz» versiyanı saxlayın.

7) Mövcudluq (A11y)

Əlaqə: 'label', 'input', 'aria-describedby' səhvləri.
Kritik - 'role = "alert"', informasiya - 'role = "status' '.
Fokusu səhv sahəyə qaytarırıq, ': focus-visible' görürük.
Mətn/ikon kontrastı ≥ AA; mənası yalnız rəngdən asılı deyil.

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) Beynəlxalq formatlar və lokalizasiya

Adlar/ünvanlar: müxtəlif əlifbalara, uzunluqlara, apostroflara, defislərə icazə verin.
Tarixlər/valyutalar/nömrələr: yerli giriş formatlarından və ciddi daxili saxlama strukturlarından (ISO/sent) istifadə edin.
Telefon: '+ CC' beynəlxalq formatında giriş, ölkə üzrə avtomatik ipucu.
Mesaj dili: qısa, mədəni cəhətdən neytral; + 20-30% xətt uzunluğu qoyun.

9) Təhlükəsizlik və məxfilik

Hesabın mövcud/mövcud olmadığını göstərməyin - ümumi mətn: «Əgər email qeydiyyatdan keçibsə, biz bir məktub göndərəcəyik».
Həssas məlumatları maskalayın (PAN, pasport).
Kritik addımlarda (bahis/ödəniş) idempotentlik və «təhlükəsiz təkrarlamalar» istifadə edin.
Log - mesajlarda PII olmadan korrelyasiya ID ilə.

10) Tərəqqinin qorunması

Avtoseyv (yerli/serverdə).
Səhv göndərildikdə - forma doldurulur; daha sonra təkrar təklif olunur.
Çox mərhələli proseslərdə (KYC) - tamamlanmış addımları saxlayın.

11) Asinxron validasiya

Debauns 250-400 ms; Bütün ekranı bloklamadan sahənin yaxınlığında «yoxlayın».
Tərtibatın «çəkilmələri» olmadan müvəffəqiyyət/uğursuzluğun aydın göstəricisi.
Şəbəkə vaxtı → "yoxlanılmadı. Risklə davam etmək?" (əgər icazə verilirsə) və ya «Təkrarla».

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) Ödəniş formaları və KYC (spesifikasiya)

Kartlar: PAN formatı, müddəti, CVC - daxil olduğu kimi validasiya; səhvlər - bank tərəfindən rədd səbəbi açıqlanmadan.
A2A/pul kisələri: ölkə/limitlər üzrə qəbuledilməzliyin yoxlanılması, komissiyalar/şərtlər haqqında aydın mətnlər.
KYC: fotoşəkil/sənədlər üçün addım-addım tələblər, əvvəlcədən baxış, faylın ölçüsü/növü, yoxlama vaxtı, məxfiliyi.
Məsuliyyətli oyun: Mesajlar neytraldır, «Limit təyin et «/« Yardım »hərəkətləri ilə.

13) Antipattern

Debauns olmadan «hər simvol üçün» səhvləri göstərmək.
Səhv olduqda formanı sıfırlayın.
Sahə/qayda göstərilmədən «Səhv giriş» mesajı.
Yalnız rəng/ikona ilə kritik məlumat.
Bir sahəni yoxlamaq üçün bütün səhifəni bloklayın.
Şəbəkə nasazlıqları zamanı oflayn rejim və təkrarlamaların olmaması.

14) Dizayn sistemi tokenləri (nümunə)

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) Satış Snippets

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) Metrika və nəzarət

Time-to-Fix (səhvdən düzəltməyə qədər vaxt).
Sahələrə və səbəblərə görə (format/limitlər/server).
Retry success rate.
Tərk edilmiş formaların payı və addım dərinliyi.
İpuçlarının doldurulması: CTR «Ətraflı», ipuçlarının gizlənmə tezliyi.

17) QA-çek siyahısı

A11y

• Fokus birinci səhv sahəyə keçir; 'aria-describedby '/' aria-invalid' sərgilənir.
• Kontrast ≥ AA; mesajlar yalnız rəngdən asılı deyil.

Davranış

• Debauns ilə daxili validasiya; səhvlər blur əvvəl görünür (kritik maskalar istisna olmaqla).
• Submit-də xülasə formalaşır, sahələr təmizlənmir.
• Asenkron yoxlamalar səhifəni bloklamır; vaxt və təkrar var.

Mətn

• Səbəb + necə düzəldilir; kodlar/günah olmadan.
• Lokalizasiya tərtibatı pozmur; nümunələr aktualdır.

Təhlükəsizlik

• Mesajlarda PII sızması yoxdur; hesabın mövcudluğunu açıqlamırıq.
• Kritik əməliyyatlar üçün idempotentlik.

18) Dizayn sistemində sənədləşmə

Komponentlər: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Standart sahələr üçün qaydaların xəritələri (email, telefon, parol, ünvan, IBAN, tarix).
Debauns, asinxron yoxlama və oflayn davranış qaydaları.
Tez-tez səhvlər üçün mətn şablonları və «əvvəl/sonra» nümunələri.

Qısa xülasə

Daxili validasiya əvvəlcədən yardım, aydın təlimatlar və məlumatlara diqqətlə yanaşmaqdır. Yerli və serverdə yoxlayın, xüsusi hərəkətlərlə lazımi anda səhvləri göstərin, əlçatanlığa və məxfiliyə hörmət edin, tərəqqini qoruyun və debountdan istifadə edin. Beləliklə, formalar dost olur və səhvlər sürətli və düzəldilir.