בדפדפנים יש תכונות מובנות לאימות, כדי לבדוק שהמשתמשים הזינו נתונים בפורמט הנכון. כדי להפעיל את התכונות האלה, צריך להשתמש ברכיבים ובמאפיינים הנכונים. בנוסף, תוכלו לשפר את אימות הטפסים באמצעות 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
האם אתם יכולים להגדיר הודעות שגיאה משלכם?
message
.:invalid
ב-CSS.אפשר לשלוח <input>
עם type="email"
ועם המאפיין required
: