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

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

שם המאפיין הוא minlength. מגדירים את הערך ל-8 וקובעים את כלל האימות הרצוי. אם רוצים את ההפך, צריך להשתמש ב-maxlength.

פרסום כללי האימות שלכם

<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">

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

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

החלפת המצב של התשובה

התשובה הנכונה היא pattern="[a-zA-Z]{2,20}".

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

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

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

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

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

input:required {
  border: 2px solid;
}

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

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

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

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

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

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

מספקים הודעות שגיאה משמעותיות

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

כדי לעשות זאת, השתמשו ב-method 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 של פקד טופס, ואימות הקלט באופן מיידי כשמשתמש עוזב שדה בטופס.

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

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

בדיקת ההבנה

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

באיזה מאפיין אתם משתמשים כדי שפקדי הטופס יהיו חובה?

required
🎉
needed
כדאי לנסות שוב.
essential
כדאי לנסות שוב.
obligatory
כדאי לנסות שוב.

האם אתם יכולים להגדיר הודעות שגיאה משלכם?

כן, עם מאפיין ה-HTML message.
כדאי לנסות שוב.
לא
זה אפשרי. כדאי לנסות שוב.
כן, עם רכיב הפסאודו של :invalid ב-CSS.
כדאי לנסות שוב.
כן, עם Constraint Validation API.
🎉

אפשר לשלוח <input> עם type="email" ועם המאפיין required:

אם הוא לא ריק.
כדאי לנסות שוב.
אם הערך שלה הוא כתובת אימייל חוקית.
🎉
בכל מקרה.
כדאי לנסות שוב.
אם הערך שלו מכיל את המילה 'אימייל'.
כדאי לנסות שוב.

מקורות מידע