Кірістірілген валидация және UX қателері

1) Қағидаттар

1. Алдын ала көмек, жаза емес. Қатеге дейін дұрыс енгізуді көрсетеміз.
2. Деректерді жоғалтпаңыз. Кез келген қате енгізілген қатені жоймайды; «Болдырмау «/» Қайталау »дегенді қолдаймыз.
3. Көрсету сәті.

Енгізгенге дейін: helper text (ережелер мен мысалдар).
Кезінде: жұмсақ хинттер/маска/автоауыстырма.
(blur/submit): «қалай түзету керек» нұсқаулығымен нақты қате.
4. Назар аударуды үнемдеу. Бір хабар - бір себеп және әрекет.
5. Қол жетімділік. Мәтін + белгішесі/түсі, ARIA арқылы өріспен байланыс, бірінші қате өріске назар аудару.

2) Валидация қабаттары

Клиенттік синхронды: пішім, ұзындық, міндеттілік, маска. Жылдам және арзан.
Клиенттік асинхронды: логиннің бірегейлігі, BIN/IBAN тексеру, API-кеңестер. Дебаунмен.
Серверлік: бизнес-ережелер, лимиттер, тәуекел-скоринг, авторизация/құқық. Соңғы сатыдағы шындық.
Ереже: тіпті тамаша клиенттік тексеру кезінде де сервер түпкілікті мәтінді растайды және қалыптастырады.

3) Таймингтер мен дебаунс

blur → жедел фидбекке валидация ≤ 100 мс.
Асинхронды тексеру - енгізу тоқтағаннан кейін 250-400 мс дебаунс.
Табысты растау - қысқа («Ок») немесе жасыл белгі; салютсіз.
'submit' дегенде қателер тізімін көрсетеміз және фокусты біріншісіне жылжытамыз.

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

4) Қателерді көшіру

Үлгі: себебі → қалай түзетуге болады → балама (бар болса).

Жақсы: "Пароль 8 таңбадан қысқа. Басқа таңбалар қосыңыз немесе «» өрнегін пайдаланыңыз.
Жақсы: "IBAN дұрыс көрінбейді. Ұзындығы мен таңбаларын тексеріңіз: A-Z, 0-9".
Жаман: «Дұрыс емес».
Пайдаланушыны кінәламаңыз; жаргондар мен кодтардан аулақ болыңыз.
Сезімтал аймақтарда (төлемдер/АЖК) қауіпсіздікті ашатын бөлшектерден аулақ боламыз.

5) Хабарламаларды көрсету үлгілері

5. 1 Өрісте (inline)

`aria-invalid="true"`, текст в `aria-describedby`.
Қысқаша, нақты; ұзын ежесіз.
Түсі + белгішесі, бірақ мағынасы - мәтінде.

5. 2 Нысанның астында (summary)

Өрістерге зәкірлері бар барлық қателердің тізімі.
«Қатеге өту» түймешігі/тармақ бойынша басу фокусты жылжытады.

5. 3 Жіберу процесінде

Қайта басу құрсауланады (state 'busy').
3-5 с таймаут кезінде - «Растауды күтеміз»... қауіпсіз қайталаумен.

6) Бетперделер, автоесептер және түзетушілер

Қалқалар кірістіруге/өңдеуге кедергі келтірмеуі тиіс. Еркін енгізуге рұқсат етіңіз, капоттың астында қалыпқа келтіріңіз.
Автоматты кеңестер: placeholder пішімдерінің мысалдарын «міндетті» бөлік емес, кеңес ретінде көрсетіңіз.
Қалыпқа келтіру: бос орындарды trimming, тіркелімдерді біріздендіру, авто-пішім (мысалы, '+ 1 (___) ___ - ____') - бірақ бастапқы деректерде «таза» нұсқаны сақтаңыз.

7) Қол жетімділік (A11y)

Байланыс: 'label', 'input', 'aria-describedby' қателері.
Сыни - 'role = «alert»', ақпараттық - 'role = «status»'.
': focus-visible' қате өрісіне назар аударамыз.
Мәтін/белгіше қарама-қайшылығы ≥ AA; мәні тек түсіне байланысты емес.

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) Халықаралық форматтар және оқшаулау

Аттары/мекенжайлары: әртүрлі алфавиттерге, ұзындықтарға, апострофтарға, дефистерге жол беріңіз.
Күндер/валюталар/нөмірлер: жергілікті енгізу пішімдерін және қатаң ішкі сақтау құрылымдарын (ISO/цент саны) пайдаланыңыз.
Телефон: халықаралық форматтағы енгізу '+ CC', ел бойынша автоматты көмек.
Қатынас тілі: қысқа, мәдени бейтарап; жол ұзындығының + 20-30% қойыңыз.

9) Қауіпсіздік және құпиялылық

Тіркелгі бар/жоқ екенін көрсетпеңіз - ортақ мәтін: «Егер email тіркелсе, біз хатты жібереміз».
Сезімтал деректерді (PAN, паспорт) жасырыңыз.
Сындарлы қадамдарда (мөлшерлеме/төлем) теңсіздікті және «қауіпсіз қайталауларды» пайдаланыңыз.
Логи - хабарлардағы PII-сыз корреляцияның ID.

10) Прогресті сақтау

Автосервис (жергілікті/серверде).
Жіберу қатесі кезінде - нысан толтырылған күйінде қалады; кейінірек қайталау ұсынылады.
Көп сатылы процестерде (KYC) - аяқталған қадамдарды сақтаңыз.

11) Асинхронды валидация

Дебаунс 250-400 мс; бүкіл экранды бұғаттамай, өрістің жанында «тексереміз»... деп көрсетеміз.
Орналасудың «дірілінуінсіз» табыстың/сәтсіздіктің айқын индикациясы.
Желі уақыты → "Тексерілмеді. Тәуекелмен жалғастыру керек пе?" (егер мүмкін болса) немесе «Қайталау».

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) Төлем нысандары және KYC (ерекшелік)

Карталар: PAN форматы, мерзімі, CVC - енгізуге қарай валидация; қателер - банктің қабылдамау себебін ашпай.
А2А/әмияндар: ел/лимиттер бойынша рұқсат етілгендігін тексеру, комиссиялар/мерзімдер туралы нақты мәтіндер.
KYC: фото/құжаттарға қадамдық талаптар, алдын ала қарау, файл өлшемі/түрі, тексеру мерзімдері, құпиялылық.
Жауапты ойын: «Лимит белгілеу «/« Көмек »әрекеттерімен бейтарап хабарламалар.

13) Антипаттерндер

Әрбір таңбаға "қателерін дебаунсыз көрсету.
Қате кезінде пішінді ысыру.
Өріс/ереже көрсетілмеген «Дұрыс емес енгізу» хабары.
Күрделі ақпарат тек түсімен/белгішесімен.
Бір өрісті тексеру үшін бүкіл бетті құрсаулау.
Желілік іркілістер кезінде оффлайн режимінің және қайталаулардың болмауы.

14) Дизайн-жүйе токендері (мысал)

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) Сату сниппеттері

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) Метрика және бақылау

Time-to-Fix (қатеден түзетуге дейін).
Өрістер бойынша және себептер бойынша Error rate (формат/лимиттер/сервер).
Қайта жіберу (retry success rate).
Тасталған нысандардың үлесі және қадамның тереңдігі.
Кеңестермен толтыру: CTR «Толығырақ», жасыру кеңестерінің жиілігі.

17) QA-чек парағы

A11y

• Фокус бірінші қате өріске ауысады; 'aria-describedby '/' aria-invalid' қойылған.
• Контраст ≥ AA; хабарлар тек түсіне байланысты емес.

Мінез-құлық

• Дебаунсы бар кіріктірілген валидация; қателер blur (сындарлы маскалардан басқа) алдында пайда болады.
• submit мәліметі жасалады, өрістер тазаланбайды.
• Асинхронды тексерулер бетті бұғаттамайды; таймаут пен қайталау бар.

Мәтін

• Себебі + қалай түзету керек; кодсыз/кінәсіз.
• Орналасу орналасуды бұзбайды; мысалдар өзекті.

Қауіпсіздік

• Хабарларда PII ағымы жоқ; тіркелгіңізді ашпаймыз.
• Күрделі операцияларға арналған теңсіздік.

18) Дизайн-жүйедегі құжаттама

Компоненттер: 'FieldError', 'FormSummary', 'HelperText', 'BusyButton'.
Үлгі өрістерге арналған ережелер картасы (email, телефон, пароль, мекенжайы, IBAN, күні).
Дебаунс, асинхронды тексеру және оффлайн-мінез-құлық бойынша гайдтар.
Жиі қателер үшін мәтін үлгілері және «дейін/кейін» мысалдары.

Қысқаша түйіндеме

Кіріктірілген валидация - алдын ала көмек, нақты нұсқаулықтар және деректерге ұқыпты қарау туралы. Жергілікті және серверде тексеріңіз, нақты әрекеттермен дұрыс уақытта қателерді көрсетіңіз, қол жетімділік пен құпиялылықты құрметтеңіз, прогресті сақтаңыз және дебаунды пайдаланыңыз. Осылайша формалар достық сипатқа ие болады, ал қателер жылдам және түзетуге болады.