קלט משתמשים הוא אחד החששות הרגישות ביותר בכל ממשק משתמש. כדאי להשתמש באפליקציה כדי לעזור למשתמשים לראות, להבין ולתקן טעויות בקלט. הסלקטורים של המחלקה :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- valid – מסמכי אינטרנט מסוג MDN
- :user- invalid – מסמכי אינטרנט של MDN
- פסאודו-מחלקות באינטראקציה עם משתמשים – טיוטה של עורך W3C
- אימות מגבלות טופס – מסמכי אינטרנט של MDN
- מדריך לנגישות ב-Forms – יוזמת הנגישות באינטרנט
תמונת השער מאת Behzad Ghaffarian ב-UnFlood.