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

תאריך פרסום: 8 בנובמבר 2023

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

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

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

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

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

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

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