JavaScript

מענה לאירועים בטפסים

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

איך לעזור למשתמשים למלא פקדים נוספים בטופס

נניח שיצרתם טופס סקר. אחרי שמשתמש בוחר אפשרות אחת, אתה רוצה להציג <input> נוסף כדי לשאול שאלה ספציפית שקשורה לבחירה. איך אפשר להציג רק את רכיב <input> הרלוונטי?

אפשר להשתמש ב-JavaScript כדי לחשוף <input> רק אם ה-<input type="radio"> המשויך נבחר כרגע.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

בואו נסתכל על קוד JavaScript עבור ההדגמה. האם שמת לב למאפיינים aria-controls ו-aria-expanded? שימוש באלה מאפייני ARIA כדי לעזור למשתמשים בקורא מסך להבין מתי מוצגת או מוסתרת פקד נוסף של טפסים.

מוודאים שהמשתמשים יכולים לשלוח טופס בלי לצאת מהדף

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

כדי לעשות זאת, צריך להאזין לאירוע onsubmit ואז להשתמש בפונקציה event.preventDefault() כדי למנוע את התנהגות ברירת המחדל, ושולחים את הערך FormData באמצעות Fetch API.

הסקריפט של הקצה העורפי יכול לבדוק אם נראה שבקשת POST מגיעה מהדפדפן (באמצעות המאפיין action של רכיב טופס, כאשר method="post") או מ-JavaScript, כמו בקשת fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

חשוב תמיד להודיע למשתמשים בקורא המסך על שינויים בתוכן דינמי. מוסיפים רכיב עם המאפיין aria-live="polite" ל-HTML, ולעדכן את התוכן של הרכיב לאחר שינוי. לדוגמה, מעדכנים את הטקסט ל'התגובה שלך פורסמה בהצלחה' אחרי שמשתמש שלח תגובה.

מידע נוסף על אזורים פעילים ב-ARIA

אימות באמצעות JavaScript

ודאו שהודעות השגיאה מתאימות לסגנון ולטון של האתר

הניסוח של הודעות השגיאה המוגדרות כברירת מחדל שונה בין דפדפנים. איך אפשר להבטיח שאותה הודעה תוצג לכל המשתמשים, ושהמסר תואם לסגנון ולטון של האתר? שימוש בsetCustomValidity() ה-method של Constraint Validation API כדי להגדיר הודעות שגיאה משלכם.

מוודאים שהמשתמשים מקבלים התראות על שגיאות בזמן אמת

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

האזנה ל blur אירוע שמופעל כשרכיב מאבד את המיקוד, ומשתמש ב- ממשק ValidityState לזיהוי אם פקד הטופס לא תקין.

לוודא שהמשתמשים יכולים לראות את הסיסמה שהם הזינו

הטקסט שהוזן בשדה <input type="password"> מוסתר כברירת מחדל. כדי לכבד את פרטיות המשתמשים. כדי לעזור למשתמשים להזין את הסיסמה שלהם, אפשר להציג <button> להחלפת מצב החשיפה של הטקסט שהוזן.

רוצים לנסות את ההדגמה? החלפת מצב הרשאות הגישה של הטקסט שהוזן, באמצעות הצגת הסיסמה <button>. איך זה עובד? לוחצים על הצגת הסיסמה, משנה את המאפיין type של שדה הסיסמה מ-type="password" ל-type="text", והטקסט <button> ישתנה ל'הסתרת הסיסמה'.

חשוב שהלחצן הצגת הסיסמה יהיה נגיש. צריך לקשר את <button> ל-<input type="password"> באמצעות המאפיין aria-controls.

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

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

מידע נוסף על הטמעת האפשרות להצגת הסיסמה

משאבים

• FormData
• ממשק API לאימות מגבלות
• <input type="password">