אימות מובנה ושגיאות UX

1) עקרונות

1. טיפול חיזוי, לא עונש. אנו מראים כיצד להיכנס נכון, לפני השגיאה.
2. אל תאבד נתונים. כל שגיאה אינה משמידה את הנכנס; תמיכה לבטל/Retry.
3. רגע של תצוגה.

לפני הכניסה: טקסט עזר (כללים ודוגמאות).
רמזים רכים/מסכה/החלפה אוטומטית.
לאחר (לטשטש/להגיש): שגיאה ברורה עם ההוראה ”איך לתקן”.
4. כלכלת תשומת לב. הודעה אחת היא סיבה אחת ופעולה אחת.
5. נגישות. טקסט + אייקון/צבע, קישור לשדה באמצעות ARIA, התמקד בשדה השגוי הראשון.

2) שכבות אימות

סינכרוני לקוח: פורמט, אורך, חובה, מסכה. מהיר וזול.
לקוח אסינכרוני: ייחודיות התחברות, בדיקת BIN/IBAN, רמזים API. עם הפוגה.
חדר שרתים: חוקי עסקים, גבולות, ניקוד סיכונים, אישור/זכויות. אמת המוצא האחרון.
כלל: אפילו עם סימון לקוח אידיאלי, השרת מאשר ויוצר את הטקסט הסופי.

3) עיתוי והפגנות

אימות לטשטוש * משוב מיידי מצורף 100 ms.
בדיקה אסינכרונית - חיוב 250-400 ms לאחר עצירת קלט.
אישור להצלחה - לקונית (”Ok”) או סמל ירוק; בלי ”הצדעות”.
ב ”הגש” אנו מראים את רשימת הטעויות והעברת המיקוד לראשון.

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

4) שגיאות קופירייטינג

תבנית: corplate: corplate = somplate = somplate = somplate = som

יופי: "הסיסמה קצרה מ-8 תווים. הוסף עוד תווים או השתמש בביטוי.

טוב: "IBAN לא נראה נכון. בדוק אורך ותווים: A-Z, 0-9"

רע: ”קלט שגוי”.
אל תאשים את המשתמש; הימנע מז 'רגון וקודים.
באזורים רגישים (תשלומים/ASC), אנו נמנעים מפרטים החושפים בטיחות.

5) תבניות תצוגת הודעות

5. 1 בשדה (קו פנים)

'Aria-inflid = "נכון" "true", jetrustrachelized' aria-authedby ".
בקצרה, באופן ספציפי; בלי פסקאות ארוכות.
צבע + סמל, אבל משמעות - בטקסט.

5. 2 מתחת לצורה (סיכום)

רשום את כל השגיאות עם עוגני השדה.
כפתור ”עבור לשגיאה ”/לחיצה על פריט משנה מיקוד.

5. 3 בתהליך שליחה

בלוק לחיצה חוזרת ונשנית (מצב ”עסוק”).
עם פסק זמן של 3-5 אס ”מחכה לאישור”... עם שידור חוזר בטוח.

6) מסכות, עצות אוטומטיות והגהות

מסכות לא צריכות להפריע להכנסה/עריכה. לאפשר כניסה חופשית, לנרמל מתחת למכסה המנוע.
טיפים אוטומטיים: הצג תבניות מדגם, ממלא מקום כרמז, לא חלק ”נדרש”.
נורמליזציה: גיזום מרחבים, איחוד רגיסטרים, פורמט אוטומטי (לדוגמה, '+ 1 (___) ___ - ____') - אבל שמור את הגרסה ה ”נקייה” בנתוני המקור.

7) זמינות (A11y)

קישור: ”תווית” ↔ ”קלט”, שגיאות ב ”אריה-תיאור”.
תפקיד קריטי = ”התראה”, תפקיד מידע = ”סטטוס”.
אנחנו חוזרים פוקוס לשדה השגוי, ': מיקוד-נראה' אנחנו רואים.
טקסט/איקונין ניגוד בין 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) ביטחון ופרטיות

אל תראה כי החשבון קיים/לא קיים - הטקסט הכללי: ”אם הדוא” ל רשום, נשלח דוא ”ל”.
מידע רגיש מסכה (PAN, דרכון).
בצעדים קריטיים (הצעה/תשלום) השתמש אידמפוטנטיות ו ”שידור חוזר בטוח”.
יומנים - עם זיהוי קורלציה ללא מח "ש בהודעות.

10) שמירת התקדמות

טיוטה אוטומטית (local/server).
במקרה של שגיאת כניעה - הטופס נשאר מלא; הציע לחזור מאוחר יותר.
עבור תהליכים רב-שלבים (KYC) - שמור צעדים מושלמים.

11) אימות אסינכרוני

דבלונס 250-400 ms; אנחנו מראים ”לבדוק” ליד השדה מבלי לחסום את כל המסך.
אינדיקציה ברורה להצלחה/כישלון בלי ”עוויתות” של הפריסה.
Transport timeout # "אין אפשרות לאמת. האם אתה רוצה להמשיך עם הסיכון? (אם ישים) או רידו.

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 - אימות כפי שהוזן; שגיאות - בלי לחשוף את הסיבה לדחייה על ידי הבנק.
A2A/wallets: אימות של קבילות על ידי מדינה/גבולות, טקסטים ברורים על עמלות/מועדים.
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) מדדים ובקרה

זמן לתקן.
קצב שגיאה על ידי שדה ועל ידי סיבה (format/limits/server).
נסה שוב את אחוזי ההצלחה.
פרופורציה של צורות נטושות ועומק המגרש.
מלא מוטיבים: CTR ”פרטים”, תדירות הסתתרות.

17) רשימת QA

A11y

[ ] פוקוס עובר לשדה הנכה הראשון; 'Aria-תאור על ידי '/' אריה-לא תקף להגדיר.

[ ניגוד ] AA; הודעות הן ללא תלות בצבע בלבד.

התנהגות

[ ] אימות מובנה עם הפוגה; טעויות מופיעות לא מוקדם יותר מטשטוש (למעט מסכות קריטיות).

[ ] סיכום נוצר על הגשה, השדות אינם נקיים.

[ ] צ 'קים אסינכרוניים אינם נועלים את הדף; יש פסק זמן והילוך חוזר.

טקסט

[ ] סיבה + איך לתקן; אין קודים/אשמה.

[ ] לוקליזציה לא לשבור את הפריסה; דוגמאות הן רלוונטיות.

בטיחות

[ ] אין דליפות מח "ש בהודעות; לא לחשוף את קיומו של החשבון.

[ ] אידמפוטנטיות לפעולות קריטיות.

18) תיעוד במערכת התכנון

רכיבים: ”שגיאה מוחצת”, ”תקציר”, ”טקסט הלפרט”, ”כפתור לבסיסי”.
מפות כלליות לשדות טיפוסיים (דוא "ל, טלפון, סיסמה, כתובת, IBAN, תאריך).
מדריכים להתבטאות, בדיקה אסינכרונית והתנהגות לא מקוונת.
טקסט תבניות לשגיאות תכופות ולפני/אחרי דוגמאות.

סיכום קצר

אימות מובנה הוא על טיפול ניבוי, הוראות ברורות ויחס זהיר לנתונים. בדוק באופן מקומי ועל השרת, הראה שגיאות בזמן הנכון עם פעולות ספציפיות, לכבד זמינות ופרטיות, לחסוך התקדמות ולהשתמש בדיבוניות. אז הצורות נעשות ידידותיות, והטעויות נעשות מהירות וניתנות לתיקון.