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

יש מה לחגוג: התכונה הזו לאינטרנט זמינה עכשיו בכל שלושת מנועי הדפדפנים!

:user-valid

תמיכה בדפדפנים

• 119
• 119
• 88
• 16.5

מקור

:user-invalid

תמיכה בדפדפנים

• 119
• 119
• 88
• 16.5

מקור

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

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

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

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

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

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

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-valid - MDN web docs
• :user-invalid - MDN web docs
• פסאודו-כיתות של אינטראקציה עם משתמשים – טיוטה של עורך W3C
• אימות אילוצים בטופס – מסמכי העזרה של MDN
• מדריך בנושא נגישות ב-Forms – Web Accessibility Initiative

תמונת השער של Behzad Ghaffarian ב-Unsplash.