Ichki validatsiya va UX xatolari

1) Qonunning

1. Oldindan aytilgan yordam, jazo emas. Xatolikka qanday toʻgʻri kiritishni koʻrsating.
2. Maʼlumotni yoʻqotmaslik. Har qanday xato kiritilgan xatoni yoʻq qilmaydi; «Bekor qilish «/» Takrorlash ».
3. Namoyish vaqti.

Kiritishdan oldin: helper text (qoidalar va misollar).
Vaqt davomida: yumshoq xintlar/niqob/avtomatik almashtirish.
Keyin (blur/submit): «qanday tuzatish kerak» koʻrsatmasi bilan aniq xato.
4. E’tiborni tejash. Bitta xabar - bitta sabab va harakat.
5. Foydalanish imkoniyati. Matn + ikona/rang, ARIA orqali maydon bilan aloqa, birinchi xato maydoniga eʼtibor.

2) Validatsiya qatlamlari

Mijoz sinxron: format, uzunlik, majburiyat, niqob. Tez va arzon.
Mijoz asinxron: loginning o’ziga xosligi, BIN/IBAN, API-maslahatlarni tekshirish. Debauns bilan.
Server: biznes-qoidalar, limitlar, risk-skoring, avtorizatsiya/huquqlar. Oxirgi instantsiya haqiqati.
Qoida: mukammal mijoz tekshiruvida ham server yakuniy matnni tasdiqlaydi va shakllantiradi.

3) Tayminglar va debauns

Validatsiya blur → tezkor fidbek ≤ 100 ms.
Asinxron tekshirish - kirish to’xtatilgandan so’ng debauns 250-400 ms.
Muvaffaqiyatni tasdiqlash - lakonik («Ok») yoki yashil ikona; «salomlarsiz».
’submit’ da xatolar roʻyxatini koʻrsating va diqqatni birinchisiga koʻchiring.

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

4) Xatolar nusxasi

Namuna: sabab → qanday tuzatish mumkin → muqobil (agar mavjud boʻlsa).

Yaxshi: "Maxfiy soʻz 8 belgidan qisqa. Boshqa belgilar qoʻshing yoki iboradan foydalaning".
Yaxshi: "IBAN noto’g’ri ko’rinadi. Uzunligi va belgilarini tekshiring: A-Z, 0-9".
Yomon: «Noto’g’ri kirish».
Foydalanuvchini ayblamang; Jargon va kodlardan qoching.
Sezgir zonalarda (to’lovlar/QQS) xavfsizlikni ochib beradigan tafsilotlardan qochamiz.

5) Xabarlarni ko’rsatish patternlari

5. 1 Maydon yaqinida (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Qisqacha, aniq; uzun xatboshilarsiz.
Rang + belgi, lekin mazmuni matnda.

5. 2 Shakl ostida (summary)

Langar xatolari roʻyxati.
Xatoga oʻtish/bosish tugmasi fokusni koʻchiradi.

5. 3 Joʻnatish jarayonida

Qayta bosishni toʻxtating (state’busy’).
Taymautda 3-5 s - «Tasdiqlashni kutamiz»... xavfsiz qaytarma bilan.

6) Niqoblar, avtoyo’llar va tuzatuvchilar

Niqoblar qoʻyish/tahrirlashga xalaqit bermasligi kerak. Bepul kiritishga ruxsat bering, kaput ostida normallashtiring.
Avtomatik maslahatlar: placeholder formatlarini «majburiy» qism sifatida emas, balki maslahat sifatida koʻrsating.
Normallashtirish: trimming bo’shliqlar, registrlarni birxillashtirish, avtoformat (masalan,’+ 1 (___) ___ - ____’) - lekin boshlang’ich ma’lumotlarga «toza» versiyani saqlang.

7) Foydalanish imkoniyati (A11y)

Aloqa:’label’ ’input’,’aria-describedby’dagi xatolar.
Tanqidiy -’role = «alert»’, axborot -’role = «status»’.
Fokusni’: focus-visible’xato maydoniga qaytaring.
Matn/piktogramma kontrasti ≥ AA; maʼnosi faqat rangga bogʻliq emas.

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) Xalqaro formatlar va mahalliylashtirish

Nomlar/manzillar: turli alifbolar, uzunliklar, apostroflar, defislarga ruxsat bering.
Sanalar/valyutalar/raqamlar: lokal kirish formatlari va qattiq ichki saqlash tuzilmasi (ISO/tsentlar soni) dan foydalaning.
Telefon: xalqaro’+ CC’formatida kirish, mamlakat bo’yicha avtomat qo’llanma.
Xabarlar tili: qisqa, madaniy betaraf; satr uzunligining + 20-30% ni qo’ying.

9) Xavfsizlik va maxfiylik

Hisob mavjud/mavjud emasligini koʻrsatmang - umumiy matn: «Agar elektron pochta roʻyxatdan oʻtgan boʻlsa, biz xat yuboramiz».
Nozik maʼlumotlarni (PAN, pasport) yashiring.
Tanqidiy qadamlarda (stavka/to’lov) idempotentlik va «xavfsiz takrorlash» dan foydalaning.
Log’lar - xabarlarda PII bo’lmagan korrelyatsiya ID bilan.

10) Taraqqiyotni saqlash

Loyihaning avtoseyvi (lokal/serverda).
Xato qilingan taqdirda - shakl to’ldirilgan bo’lib qoladi; keyinroq takrorlash taklif etiladi.
Koʻp bosqichli jarayonlarda (KYC) - tugallangan qadamlarni saqlab qoling.

11) Asinxron validatsiya

Debauns 250-400 ms; Ekranni to’sib qo’ymasdan maydon yonida «tekshiramiz».
Maket siljishlarisiz muvaffaqiyat/muvaffaqiyatsizlikning aniq ko’rsatkichi.
Tarmoq vaqti → "Tekshirib boʻlmadi. Xavf bilan davom etishni istaysizmi?" (agar ruxsat etilsa) yoki «Takrorlash».

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) To’lov shakllari va KYC (o’ziga xos xususiyat)

Xaritalar: PAN formati, muddati, CVC - kiritilishiga qarab validatsiya; xatolar - bank tomonidan rad etish sabablarini oshkor qilmasdan.
A2A/hamyonlar: mamlakat/limitlar bo’yicha yo’l qo’yilishini tekshirish, komissiyalar/muddatlar to’g "risidagi aniq matnlar.
KYC: foto/hujjatlarga bosqichma-bosqich talablar, oldindan ko’rib chiqish, faylning o’lchami/turi, tekshirish muddatlari, maxfiylik.
Mas’uliyatli o’yin: «Limit belgilash «/« Yordam »harakatlari bilan neytral xabarlar.

13) Antipatternlar

Har bir belgi uchun xatolarni debaunsiz koʻrsatish.
Xato roʻy berganda shaklni qayta tiklash.
Maydon/qoidani koʻrsatmagan holda «Notoʻgʻri kirish» xabari.
Tanqidiy maʼlumot faqat rang/ikonka bilan.
Bitta maydonni tekshirish uchun butun sahifani bloklash.
Tarmoq uzilishlarida oflayn rejim va takrorlashlarning yo’qligi.

14) Dizayn-tizim tokenlari (misol)

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) Sotish snippetlari

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 va nazorat

Time-to-Fix (xatodan tuzatishgacha boʻlgan vaqt).
Error rate (format/limitlar/server).
Qayta joʻnatish (retry success rate).
Tashlangan shakllar ulushi va qadam chuqurligi.
Maslahatlar bilan to’ldirish: «Tafsilotlar» CTR, maslahatlarni yashirish chastotasi.

17) QA-chek-varaq

A11y

• Fokus birinchi xato maydoniga o’tadi;’aria-describedby ’/’ aria-invalid’qo’yilgan.
• Kontrast ≥ AA; xabarlar faqat rangga bogʻliq emas.

Xatti-harakatlar

• Debauns bilan o’rnatilgan validatsiya; xatolar blur (tanqidiy niqoblardan tashqari) dan oldin paydo bo’ladi.
• Submit uchun maʼlumot shakllantiriladi, maydonlar tozalanmaydi.
• Asinxron tekshiruvlar sahifani bloklamaydi; taymaut va takrorlash mavjud.

Matn

• Sabab + qanday tuzatish kerak; kodlarsiz/aybsiz.
• Lokalizatsiya sxemani buzmaydi; misollar dolzarbdir.

Xavfsizlik

• Xabarlarda PII tarqalishi yo’q; Hisobni oshkor qilmaymiz.
• Tanqidiy operatsiyalar uchun idempotentlik.

18) Dizayn-tizimdagi hujjatlar

Komponentlar:’FieldError’,’FormSummary’,’HelperText’,’BusyButton’.
Namunaviy maydonlar uchun qoidalar xaritalari (email, telefon, parol, manzil, IBAN, sana).
Debound, asinxron tekshirish va oflayn xulq-atvor bo’yicha gaydlar.
Tez-tez xatoliklar uchun matn namunalari va «oldin/keyin» misollari.

Qisqacha xulosa

Ichki validatsiya - bu oldindan aytilgan yordam, aniq ko’rsatmalar va ma’lumotlarga ehtiyotkorlik bilan munosabatda bo’lish. Mahalliy va serverda tekshiring, xatolarni kerakli vaqtda aniq harakatlar bilan ko’rsating, maxfiylik va maxfiylikni hurmat qiling, taraqqiyotni saqlab qoling va debounsdan foydalaning. Shunday qilib, shakllar do’stona bo’lib, xatolar tez va to’g’ri bo’ladi.