איך לעזור למשתמשים להזין את הנתונים הנכונים בטפסים

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

למה כדאי לאמת את הטפסים?

במודול הקודם למדתם איך לעזור למשתמשים להימנע מהצורך לבצע שוב ושוב פעולות. להזין מחדש מידע בטפסים. איך אפשר לעזור למשתמשים להזין נתונים תקינים?

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

כדי לעזור למשתמשים בנושא הזה, אתם יכולים להגדיר כללי אימות ולציין אותם.

עזרה למשתמשים כך שחסרים בטעות שדות חובה

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

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

הסיבה לכך היא המאפיין required.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

כבר למדת שאפשר להשתמש בעוד סוגים רבים, לדוגמה, type="email". נבחן את הודעת האימייל הנדרשת <input>.

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

המאפיין required מורה לדפדפן שהשדה הוא שדה חובה. הדפדפן גם בודק אם הנתונים שהוזנו תואמים לפורמט של type. שדה האימייל שמוצג בדוגמה תקף רק אם הוא לא ריק ואם הנתונים שהוזנו הם כתובת אימייל תקינה.

עוזרים למשתמש להזין את הפורמט הנכון

למדת איך להגדיר שדה חובה. איך מנחים את הדפדפן להזין שמונה תווים לפחות בשדה בטופס?

רוצה לנסות את ההדגמה? לאחר השינוי, אם הזנתם פחות משמונה תווים, לא תוכלו לשלוח את הטופס.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

דיווח על כללי האימות

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

חשוב לוודא שכל המשתמשים מבינים את כללי האימות שלך. כדי לעשות את זה, צריך לחבר את פקד הטופס לרכיב שמסביר את הכללים. כדי לעשות זאת, צריך להוסיף מאפיין aria-describedby לרכיב עם ה-id של הטופס.

מאפיין דוגמת העיצוב

לפעמים רוצים להגדיר כללי אימות מתקדמים יותר. שוב, אפשר להשתמש במאפיין HTML. היא נקראת pattern, ואפשר להגדיר ביטוי רגולרי בתור הערך.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

במקרה הזה, מותר להשתמש רק באותיות קטנות; המשתמש צריך להזין לפחות שני תווים, ולא יותר מ-20 תווים.

איך היית משנה את pattern כך שאפשר יהיה להשתמש גם באותיות רישיות? רוצים לנסות?

הוספת סגנונות

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

איך מעצבים שדה חובה בטופס

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

אפשר לעצב שדות של required באמצעות מחלקה מדומה של CSS :required.

input:required {
  border: 2px solid;
}

פקדי טופס לא חוקיים של סגנון

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

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

יש עוד דרכים להתאים את הסגנונות בהתאם לאימות. במודול על CSS תמצאו מידע נוסף על טופסי עיצוב.

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

כדי לשפר את האימות של הטפסים, אפשר להשתמש JavaScript Constraint Validation API.

להציג הודעות שגיאה משמעותיות

למדתם בעבר שהודעות שגיאה אינן זהות בכל דפדפן. איך אפשר להציג את אותו ההודעה לכולם?

כדי לעשות את זה משתמשים setCustomValidity() של Constraint Validation API. עכשיו נראה איך זה עובד.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

מריצים שאילתה על הרכיב שבו רוצים להגדיר את הודעת השגיאה בהתאמה אישית. מאזינים לאירוע invalid של הרכיב המוגדר. שם הגדרת את ההודעה עם setCustomValidity(). בדוגמה הזו מוצגת ההודעה Please enter your name. אם הקלט לא תקין.

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

יש עוד הרבה דברים שאפשר לעשות עם Constraint Validation API. במאמר הזה תמצאו הסבר מפורט על השימוש אימות באמצעות JavaScript במודול מאוחר יותר.

איך לבצע אימות בזמן אמת אפשר להוסיף אימות בזמן אמת ב-JavaScript על ידי האזנה לאירוע onblur של פקד הטופס, ולאמת את הקלט באופן מיידי כשמשתמש עוזב שדה בטופס.

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

מידע נוסף על הטמעה אימות בזמן אמת באמצעות JavaScript במודול הבא.

בדיקת ההבנה

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

משאבים

• השבתה של לחצן התשלום אחרי שליחת הטופס
• צריך להוסיף שירות CSS כדי לשפר את אופן הפעולה של הטופס