סוגי פסאודו המחלקות :user-תקין ו-:user-לא חוקי

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

הסלקטורים לפסאודו-מחלקה של האינטראקציה של המשתמש

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

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

שימוש בסוגי המשנה :user-valid ו-:user-invalid

השתמשו בפסאודו-מחלקות האלה כדי לעצב פקדי קלט, בחירה ואזורי טקסט, כפי שמוצג בדוגמאות הבאות:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

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

חוויית משתמש משופרת עם פחות קוד

בלי פסאודו-מחלקות כאלה, חוויית המשתמש תופעל על ידי :user-valid ו-:user-invalid דרשו קוד נוסף עם שמירת מצב. הקוד הזה היה צריך לעקוב אחרי הערך הראשוני, מצב המיקוד הנוכחי של הקלט, מידת השינויים של המשתמש בערך, להריץ בדיקת תקינות נוספת ולבסוף להוסיף כיתה לבחירת סגנון. עכשיו אפשר להסתמך על כדי לטפל בכל התהליך באופן אוטומטי.

מקורות מידע נוספים

• :user-regex – מסמכי אינטרנט של MDN
• :user-invalid - MDN web docs
• פסאודו-כיתות של אינטראקציה עם משתמשים – טיוטה של עורך W3C
• אימות של מגבלת טופס – מסמכי אינטרנט של MDN
• מדריך לנגישות של Forms – יוזמת הנגישות באינטרנט

תמונת שער של Behzad Ghaffarian פועלת ביטול הפתיחה.