ולידציה של טפסים באמצעות HTML5

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

מהי ולידציה באמצעות HTML5

לפני שנגיע לדוגמאות, אסביר לכם את משמעות הוליצדיה בשיטה זו וכיצד היא עובדת.
HTML5 מאפשרת לנו להוסיף תכונות (attributes) על מנת לקבוע את הקלט אותו אנו מצפים לקבל.
התכונות שבהם נשתמש הן pattern ו-title.

patterm

מגדידה את הקלט אותו אנו מצפים לקבל.

title

מגדירה את ההודעה שתופיע למשתמש במידה והקלט אינו "תקין".

הערה: בדוגמאות הבאות השתמשתי גם ב-required, המשמעות היא שהשדה הוא נדרש והוא לא יכול להיות ריק.

האם ולידציה זו מספיקה?

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

קדימה, דוגמאות

אותיות באנגלית בלבד (גדולות וקטנות):

<input type="text" name="name" pattern="[A-Za-z]+" title="אנא הזן אותיות A-Z בלבד" required />

הערה: אם היינו מעוניינים באותיות קטנות בלבד היינו משתמשים ב-a-z בלבד.
לאותיות גדולות בלבד היינו משתמשים ב-A-Z בלבד.

מספרים בלבד:

<input type="text" name="onlyNumbers" pattern="[0-9]+" title="אנא הזן מספרים בלבד" required />

לפחות 8 תווים:

<input type="text" name="username" pattern=".{8,}" title="אנא הזן 8 תווים לפחות">

6-12 תווים:

<input type="text" name="username" pattern=".{6,12}" title="אנא הזן 6-12 תווים">

בדיקת תקינות מייל:

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="אנא הזן כתובת מייל תקינה">

בדיקת סיסמא:

<input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,12}" title="הסיסמא חייב להכיל לפחות אות קטנה אחת, אות גדולה אחת ומספר אחד. 6-12 תווים" required />

בדיקת מספר סלולארי תקין:

<input type="text" name="phone" pattern="05?[0-9]-?[0-9]{7}" title="אנא הזן מספר סלולרי תקין" required />

בדיקת כתובת URL:

<input type="url" name="url" pattern="https?://.+" title="אנא הזן כתובת אתר אינטרנט תקינה" required />

Accept

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

<input type="file" name="image" accept="image/jpeg,image/png,image/jpg">

סיכום

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

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


4 תגובות בנושא “ולידציה של טפסים באמצעות HTML5”

  1. בקיצור, ה-pattern צריך להיות ביטוי רגולרי, כן?
    ונראה לי שבדוגמה של בדיקת כתובת URL הקוד שלך לא מקבל כתובות עם HTTP (כלומר לא HTTPS). לא ככה?

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *