Içerki tassyklama we UX ýalňyşlyklary

1) Ýörelgeler

1. Öňünden aýdylýan kömek, jeza däl. Hatadan öň nädip dogry ýazmalydygyny görkezýäris.
2. Maglumatlary ýitirme. Islendik ýalňyşlyk girizilenleri ýok etmeýär; "Ýatyrmak "/" Gaýtalamak ".
3. Görkeziş pursaty.

Girmezden ozal: helper text (düzgünler we mysallar).
Wagtynda: ýumşak hintler/maska/awtomatiki çalyşma.
(blur/submit): "nädip düzetmeli" görkezmesi bilen aç-açan ýalňyşlyk.
4. Ünsi tygşytlamak. Bir habar - bir sebäp we hereket.
5. Elýeterlilik. Tekst + nyşan/reňk, ARIA arkaly meýdan bilen baglanyşyk, birinji ýalňyşlyk meýdanyna üns.

2) Tassyklama gatlaklary

Müşderi sinhron: format, uzynlyk, borçlylyk, maska. Çalt we arzan.
Müşderi asinxron: loginiň özboluşlylygy, BIN/IBAN, API-maslahatlary barlamak. Debaunt bilen.
Serwer: iş düzgünleri, çäkler, töwekgelçilik-skoring, awtorizasiýa/hukuklar. Iň soňky kazyýet işi.
Düzgün: iň oňat müşderi barlagynda-da serwer gutarnykly teksti tassyklaýar we emele getirýär.

3) Taýmingler we debauns

Blur → dessine fidbek ≤ 100 ms.
Asinhron barlagy - giriş durandan soň 250-400 ms debauns.
Üstünligi tassyklamak - lakoniki ("Ok") ýa-da ýaşyl nyşan; "Salam" bolmazdan.
'submit' -de ýalňyşlyklaryň sanawyny görkezýäris we ünsi birinjisine geçirýäris.

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

4) Ýalňyşlyklaryň göçürilmegi

Şablon: sebäp → nädip düzetmeli → alternatiw (bar bolsa).

Gowy: "Parol 8 simwoldan gysga. Has köp nyşan goşuň ýa-da sözlemi ulanyň".
Gowy: "IBAN nädogry görünýär. Uzynlygyny we nyşanlaryny barlaň: A-Z, 0-9".
Erbet: "Nädogry giriş".
Ulanyjyny günäkärlemäň; jargondan we kodlardan gaça duruň.
Duýgur zolaklarda (tölegler/KUS) howpsuzlygy açýan jikme-jikliklerden gaça durýarys.

5) Habarlary görkezmek patternleri

5. 1 Meýdanda (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Gysgaça, takyk; uzyn abzassyz.
Reňk + nyşan, ýöne manysy tekstde.

5. 2 Görnüşiň aşagynda (summary)

Armaturlar bilen ähli ýalňyşlyklaryň sanawy.
"Ýalňyşlyga geç" düwmesi/nokada basmak fokusy göçürýär.

5. 3 Iberilende

Gaýtadan basmagy bloklaýarys (state 'busy').
3-5 s ýarymda - "Tassyklamaga garaşýarys"... howpsuz gaýtalamak bilen.

6) Maskalar, awtomatiki maslahatlar we düzedijiler

Maskalar goýmaga/redaktirlemäge päsgel bermeli däldir. Mugt girmäge rugsat beriň, kapotyň aşagynda kadalaşdyryň.
Awto maslahatlar: "hökmany" bölek däl-de, format, placeholder mysallaryny görkeziň.
Kadalaşma: boşluklary trimming, registrleri birleşdirmek, awto-format (mysal üçin '+ 1 (___) ___ - ____') - ýöne asyl maglumatlary "arassa" wersiýasyny saklaň.

7) Elýeterlilik (A11y)

Baglanyşyk: 'label' 'input', 'aria-describedby' -de ýalňyşlyklar.
Kritiki - 'role = "alert"', maglumat - 'role = "status"'.
Focus-visible 'fokusyny nädogry meýdana gaýtarýarys.
Tekstiň/nyşanlaryň gapma-garşylygy ≥ AA; manysy diňe reňkine bagly däl.

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) Halkara formatlary we lokalizasiýa

Atlar/salgylar: dürli elipbiýlere, uzynlyklara, apostroflara, defislere ýol beriň.
Seneler/walýutalar/belgiler: ýerli giriş formatlaryny we berk içerki saklaýyş gurluşlaryny (ISO/sentleriň sany) ulanyň.
Telefon: '+ CC' halkara formatynda giriş, ýurt boýunça awtomatiki kömek.
Habar dili: gysga, medeni taýdan bitarap; setiriň uzynlygynyň + 20-30% -ini goýuň.

9) Howpsuzlyk we gizlinlik

Hasabyň bardygyny/ýokdugyny görkezmäň - umumy tekst: "Eger e-poçta hasaba alnan bolsa, biz hat ibereris".
Duýgur maglumatlary gizläň (PAN, pasport).
Möhüm ädimlerde (stawka/töleg) idempotentligi we "howpsuz gaýtalamalary" ulanyň.
Logi - habarlarda PII-siz baglanyşyk ID bilen.

10) Ösüşiň saklanmagy

Taslamanyň awtoseýwi (lokal/serwerde).
Iberilen ýalňyşlyk ýüze çykan halatynda - görnüş doldurylýar; soň gaýtalanmagy teklip edilýär.
Köp basgançakly amallarda (KYC) - tamamlanan ädimleriňizi saklaň.

11) Asinhron tassyklamasy

Debauns 250-400 ms; "barlaýarys"... tutuş ekrany petiklemezden meýdanyň golaýynda.
"Dyrmaşmazdan" üstünlik/şowsuzlygyň aýdyň görkezijisi.
Toruň wagty → "Barlap bolmady. Töwekgelçilik bilen dowam etmek?" (rugsat berilse) ýa-da "Gaýtalaň".

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) Töleg görnüşleri we KYC (aýratynlygy)

Kartlar: PAN formaty, möhleti, CVC - girizilmegine görä tassyklama; ýalňyşlyklar - bank tarapyndan ret edilmeginiň sebäbini aýan etmezden.
A2A/gapjyklar: ýurt/çäkler boýunça kabul edilip bilinjekdigini barlamak, komissiýalar/möhletler hakynda aýdyň tekstler.
KYC: surat/resminamalara ädimme-ädim talaplar, deslapky gözden geçirmek, faýlyň ululygy/görnüşi, barlagyň möhletleri, gizlinlik.
Jogapkär oýun: "Çäk "/" Kömek "hereketleri bilen bitarap habarlar.

13) Antipatternler

Her nyşana "hatalary debaunssyz görkezmek.
Hata ýüze çykanda formany täzeden açyň.
Meýdan/düzgün görkezilmezden "Nädogry giriş" habary.
Möhüm maglumatlar diňe reňk/nyşan bilen.
Bir meýdany barlamak üçin tutuş sahypany ýapyň.
Tor şowsuzlyklarynda awtonom re modeimiň we gaýtalamalaryň ýoklugy.

14) Dizaýn-ulgamyň bellikleri (mysal)

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) Amala aşyrmagyň snippetleri

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 we gözegçilik

Wagt-to-Fix (ýalňyşlykdan düzedişe çenli wagt).
Error rate meýdanlar we sebäpler boýunça (format/çäkler/serwer).
Gaýtadan ibermek (retry success rate).
Taşlanan görnüşleriň paýy we ädimiň çuňlugy.
Maslahatlary doldurmak: "Has giňişleýin maglumat" CTR, maslahatlary gizlemegiň ýygylygy.

17) QA-çek-sanawy

A11y

• Fokus birinji ýalňyşlyk meýdanyna geçýär; 'aria-describedby '/' aria-invalid'.
• Kontrast ≥ AA; Habar diňe reňkine bagly däl.

Özüni alyp barşy

• Debaunt bilen gurlan tassyklama; ýalňyşlyklar blur-dan öň ýüze çykmaýar (möhüm maskalardan başga).
• Submit üçin gysgaça maglumat düzülýär, meýdanlar arassalanmaýar.
• Asinxron barlaglar sahypany petiklemeýär; wagt we gaýtalamak bar.

Tekst

• Sebäbi + nädip düzetmeli; kod/günäsiz.
• Lokalizasiýa ýerleşişi bozmaýar; mysallar ýerliklidir.

Howpsuzlyk

• Habarlarda PII syzmagy ýok; Hasabyň bardygyny aýan etmeýäris.
• Möhüm amallar üçin idempotentlik.

18) Dizaýn-ulgamdaky resminamalar

Komponentler: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Adaty meýdanlar üçin düzgünleriň kartlary (email, telefon, parol, salgy, IBAN, senesi).
Debauns, asinhron barlagy we awtonom hereket boýunça gaýdlar.
Ýygy-ýygydan ýalňyşlyklar üçin tekst şablonlary we "öň/soň" mysallary.

Gysgaça gysgaça

Içerki tassyklama, öňünden aýdylýan kömek, anyk görkezmeler we maglumatlara seresaplylyk bilen garamak hakda. Lokal we serwerde barlaň, anyk hereketler bilen dogry wagtda ýalňyşlyklary görkeziň, elýeterlilige we gizlinlige hormat goýuň, öňegidişligi saklaň we debaunty ulanyň. Şeýdip, görnüşler dostlukly bolýar, ýalňyşlyklar bolsa çalt we düzedip bolýar.