המדריך המלא לטפורמות HTML ואימות הגבלה

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

מהי אימות הסינון המגבלת?

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

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

אימות צד-לקוח מול אימות צד-שרת

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

אבל קודם כל, הנה הודעת אזהרה גדולה:

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

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

שדות קלט HTML5

HTML מספק:

• <textarea> לתיבות טקסט רב-שורתיות
• <select> לרשימת תפריט נפתח
• <button> ל… כפתורים

אבל תשתמש ב<input> הכי הרבה:

<input type="text" name="username" />

התכונה type קובעת את סוג הבקרה, ויש ברירה רחבה של אפשרויות:

type	description
button	a button with no default behavior
checkbox	a check/tick box
color	a color picker
date	a date picker for the year, month, and day
datetime-local	a date and time picker
email	an email entry field
file	a file picker
hidden	a hidden field
image	a button which displays the image defined by the src attribute
month	a month and year picker
number	a number entry field
password	a password entry field with obscured text
radio	a radio button
range	a slider control
reset	a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful)
search	a search entry field
submit	a form submission button
tel	a telephone number entry field
text	a text entry field
time	a time picker with no time zone
url	a URL entry field
week	a week number and year picker

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

תכונות נוספות שימושיות של <input> כוללות:

attribute	description
accept	file upload type
alt	alternative text for the image types
autocomplete	hint for field auto-completion
autofocus	focus field on page load
capture	media capture input method
checked	checkbox/radio is checked
disabled	disable the control (it won’t be validated or have its value submitted)
form	associate with a form using this ID
formaction	URL for submission on submit and image buttons
inputmode	data type hint
list	ID of <datalist> autocomplete options
max	maximum value
maxlength	maximum string length
min	minimum value
minlength	minimum string length
name	name of control, as submitted to server
pattern	a regular expression pattern, such as [A-Z]+ for one or more uppercase characters
placeholder	placeholder text when the field value is empty
readonly	the field is not editable, but it will still be validated and submitted
required	the field is required
size	the size of the control (often overridden in CSS)
spellcheck	set true or false spell-checking
src	image URL
step	incremental values in numbers and ranges
type	field type (see above)
value	the initial value

שדות פלט HTML

כ ,,כן כ ,,כנסות קלט, HTML5 מספק פלטים רק לקריאה:

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

תוויות קלט

שדות צריכים להיות קשורים ל-<תווית>, שאפשר לעטוף סביב האלמנט:

<label>your name <input type="text" name="name" /><label>

או לקשר את השדה של id לתווית באמצעות תכונת ל:

<label for="nameid">your name</label>
<input type="text" id="nameid" name="name" />

תוויות חשובות לנגישות. אולי נתקלתם בטפסים המשתמשים ב-מיקום כדי לחסוך בשטח המסך:

<input type="text" name="name" value="" placeholder="your name" />

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

התנהגויות קלט

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

רוב סוגי השדות ברורים, אך יש ואילו יצאו מן הכלל. לדוגמה, כרטיסי אשראי הם מספריים, אך ספינר ההגדלה/הקטנה הוא חסר תועלת וקל מדי ללחוץ כנגד מעלה או מטה כאשר מזינים מספר כרטיס בת 16 ספרות. עדיף להשתמש בסוג text רגיל, אך להגדיר את תכונת ה-inputmode ל-numeric, מה שמציג מקלדת מתאימה. הגדרת autocomplete="cc-number" גם מציעה כל כרטיסים שהוקצו מראש או נכנסו קודם.

שימוש בסוג השדה הנכון type ו-autocorrect משאיר תועלות שיהיה קשה להשיג ב-JavaScript. לדוגמה, כמה דפדפנים ניידים יכולים:

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

אוטומטי ולידאת

הדפדפן מוודא שהערך המוזנה מציית להגבלות המוגדרות על ידי התכונות type, min, max, step, minlength, maxlength, pattern ו-required. לדוגמה:

<input type="number" min="1" max="100" required />

ניסיון הגשת ערך ריק מונע שליחת הטופס ומציג את הודעה הבאה ב-Chrome:

הספינרים לא יאפשרו ערכים מחוץ לטווח 1 עד 100. הודעות אימות דומות מופיעות אם תקליד מחרוזת שאינה מספר. הכול מבלי שום שורת JavaScript.

אפשר לבטל אימות בדפדפן על ידי:

• הוספת תכונה novalidate לאלמנט <form>
• הוספת תכונה formnovalidate לכפתור ההגעה או לתמונה

יצירת קלטות JavaScript מותאמות אישית

אם אתה כותב רכיב קלט לזמן קלטה מבוסס JavaScript חדש, בבקשה עצור והתרחק מהמקלדת שלך!

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

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

1. בקרים סטנדרטיים קשה לשנות את הסגנון

שינון CSS הוא מוגבל ולעתים קרובות דורש פריצות כמו כיסוי קלט עם ::before של התווית שלו ו-::after פסאודו-אלמנטים. המצב משתפר, אך שאל כל עיצוב שמעדיף צורה על פונקציה.

2. סוגי <input> מודרניים אינם נתמכים בדפדפנים ישנים

במהותה, אתה מתכנת עבור Internet Explorer. משתמשי IE לא יקבלו קולקציית בחירת תאריך אך עדיין יכולים להזין תאריכים בפורמט YYYY-MM-DD. אם הלקוח מתעקש לכן, הטעינו פוליפיל רק ב-IE. אין צורך לעמל על דפדפנים מודרניים.

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

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

בסיכום: תמנע מלהמציא מחדש בקרות HTML!

סגנון אימות CSS

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

selector	description
:focus	the field with focus
:focus-within	an element contains a field with focus (yes, it’s a parent selector!)
:focus-visible	an element has focus owing to keyboard navigation, so a focus ring or more evident styling is necessary
:required	a field with a required attribute
:optional	a field without a required attribute
:valid	a field that has passed validation
:invalid	a field that has not passed validation
:user-valid	a field that has passed validation after the user has interacted with it (Firefox only)
:user-invalid	a field that hasn’t passed validation after the user has interacted with it (Firefox only)
:in-range	the value is within range on a number or range input
:out-of-range	the value is out of range on a number or range input
:disabled	a field with a disabled attribute
:enabled	a field without a disabled attribute
:read-only	a field with a read-only attribute
:read-write:	a field without a read-only attribute
:checked	a checked checkbox or radio button
:indeterminate	an indeterminate checkbox or radio state, such as when all radio buttons are unchecked
:default	the default submit button or image

אפשר לעצב את הטקסט placeholder של קלט עם הפסאודו-אלמנט ::placeholder:

/* טקסט placeholder כחול בשדות דואר אלקטרוני */
input[type="email"]::placeholder {
  color: blue;
}

לבחירות לעיל יש אותה ספציפיות, ולכן הסדר יכול להיות חשוב. שקול את הדוגמה הבאה:

input:invalid { color: red; }
input:enabled { color: black; }

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

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

:invalid {
  border-color: #900;
}

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

JavaScript ו API האימות המוגבל

הAPI האימות המוגבלמספק אפשרויות התאמת טופס שיכולות לשפר את בדיקת השדות הרגילה של HTML. ניתן:

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

אימות טופס

לפני שמשתמשים ב-API, הקוד שלך צריך להשבית את האימות הברירת מחדל והודעות השגיאה על ידי הגדרת תכונת noValidate של הטופס לtrue (כמו הוספת תכונת novalidate):

const myform = document.getElementById('myform');
myform.noValidate = true;

לאחר מכן ניתן להוסיף מזהים אירועים – כגון כשהטופס שולח:

myform.addEventListener('submit', validateForm);

המזהה יכול לבדוק האם כל הטופס תקין באמצעות השיטות checkValidity() או reportValidity(), שמחזירות true כשכל קלטי הטופס תקינים. (ההבדל הוא שcheckValidity() בודק האם קיימים קלטים שנתונים לאימות מוגבל.)

מסמכי Mozilla מסבירים:

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

// לאמת את הטופס בזמן הגשה
function validateForm(e) {

  const form = e.target;

  if (form.checkValidity()) {

    // הטופס תקין - עבור בדיקות נוספות

  }
  else {

    // הטופס לא תקין - בטל שליחה
    e.preventDefault();

  }

};

A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.

אימות שדות

לשדות בודדים יש את המאפיינים הבאים של אימות עקרונות:

• willValidate: מחזיר true אם האלמנט הוא מועמד לאימות עקרונות.

• validationMessage: הודעת האימות. זה יהיה מחרוזת ריקה אם השדה תקין.

• valitity: עצם אובייקט ValidityState. זה כולל מאפיין valid שמוגדר על true כאשר השדה תקף. אם זה false, אחד או יותר מהמאפיינים הבאים יהיו true:

  ValidityState	תיאור
  .badInput	הדפדפן לא יכול להבין את הקלט
  .customError	הוגדרה הודעת שגיאה מUSTOM
  .patternMismatch	הערך אינו תואם את התכונה pattern המוגדרת
  .rangeOverflow	הערך גדול מהתכונה max
  .rangeUnderflow	הערך קטן מהתכונה min
  .stepMismatch	הערך אינו עומד בכללי התכונה step
  .tooLong	אורך המחרוזת גדול מהתכונה maxlength
  .tooShort	אורך המחרוזת קטן מהתכונה minlength
  .typeMismatch	הערך אינו כתובת אימייל או URL תקינה
  .valueMissing	ערך required ריק

לשדות בודדים ישנן השיטות הבאות לאימות כניסה:

• setCustomValidity(message): מגדיר מסר שגיאה עבור שדה לא תקין. מחרוזת ריקה חייבת להיות מעורבת כאשר השדה תקין אחרת השדה יישאר לא תקין לנצח.
• checkValidity(): מחזיר true כאשר הקלט תקין. התכונה valitity.valid עושה את אותו הדבר, אך checkValidity() גם מעורר אירוע invalid על השדה שיכול להיות שימושי.

פונקציית הטיפול validateForm() יכולה לעבור על כל שדה ולהחיל מחלקה invalid לאלמנט ההורה שלו כשצריך:

function validateForm(e) {
  const form = e.target;
  if (form.checkValidity()) {
    // הטופס תקין - בצע בדיקות נוספות
  }
  else {
    // הטופס לא תקין - בטל שליחה
    e.preventDefault();
    // החיל מחלקה לא תקין
    Array.from(form.elements).forEach(i => {
      if (i.checkValidity()) {
        // השדה תקין - הסר מחלקה
        i.parentElement.classList.remove('invalid');
      }
      else {
        // השדה לא תקין - הוסף מחלקה
        i.parentElement.classList.add('invalid');
      }
    });
  }
};

נניח שהHTML שלך הגדיר שדה דואר אלקטרוני:

<div>
  <label for="email">email</label>
  <input type="email" id="email" name="email" required />
  <p class="help">Please enter a valid email address</p>
</div>

התסריט מחבר מחלקה לא תקינה ל <div> כאשר האימייל אינו צוין או לא תקין. CSS יכול להציג או להסתיר את הודעת האימות כשהטופס נשלח:

.help { display: none; }
.invalid .help { display: block; }
.invalid label, .invalid input, .invalid .help {
  color: red;
  border-color: red;
}

יצירת בודק אימות טופס מUSTOM

הדוגמה הבאה מציגה דוגמה של טופס קשר הדורש שם משתמש ואחת מהנותנות הבאות: כתובת דוא"ל, מספר טלפון, או שניהם:

זה מיושם באמצעות מחלקת אימות טופס גנרית בשם FormValidate. אלמנט טופס מועבר כשמממשים אובייקט. פרמטר שני אופציונלי יכול להיקבע:

• true לאימות כל שדה כשהמשתמש משתמש בו
• false (ברירת המחדל) לאימות כל השדות לאחר הגשת הראשונה (אימות רמת השדה מתרחש לאחר מכן)

// אימות טופס קשר
const contactForm = new FormValidate(document.getElementById('contact'), false);

שיטה .addCustom(field, func) מגדירה פונקציות אימות מותאמות אישית. הקוד הבא מוודא שאחד מהשדות דוא"ל או טלפון תקין (שניהם אין להם תכונות נדרש):

// אימות מותאם אישית - דוא"ל ו/או טלפון
const
  email = document.getElementById('email'),
  tel = document.getElementById('tel');

contactForm.addCustom(email, f => f.value || tel.value);
contactForm.addCustom(tel, f => f.value || email.value);

A FormValidate object monitors both of the following:

• focusout אירועים, שאז בודקים שדה בודד
• אירועי הגשה של הטופס, שאז בודקים כל שדה

שניהם קוראים לשיטה .validateField(field), שבודקת האם שדה עובר אימות על פי הסדרה התקנית. כשהוא כן, כל פונקציות האימות המותאמות אישית המוקצבות לשדה מבוצעות בתורן. כולם חייבים להחזיר true כדי שהשדה יהיה תקין.

שדות שגויים מקבלים מיוזן "invalid" שמיועד לאלמנט ההורה של השדה, והמראה הפנימי האדום משתמש ב-CSS.

לבסוף, האובייקט קורא לפונקציה submit מותאמת אישית כאשר כל הטופס תקין:

// שליחה אישית
contactForm.submit = e => {
  e.preventDefault();
  alert('Form is valid!\n(open the console)');
  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
}

או שאפשר להשתמש ב-addEventListener סטנדרטי לטפל באירועים submit של הטופס, מאחר ש-FormValidate מונעת ממפעילים נוספים לפעול כאשר הטופס שגוי.

מיומנות בטופס

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

המלצות:

• השתמש בסוגי קלט HTML הסטנדרטי ככל האפשר. הגדר min, max, step, minlength, maxlength, pattern, required, inputmode, ו-autocomplete תכונות כראוי.
• אם יש צורך, השתמש בקצת JavaScript לאפשר ולללל בקשות אישיות והודעות.
• לשדות מורכבים יותר, שיפור בצורה הדרגתית את הקלטים הסטנדרטיים.

לבסוף: תשכח מאינטרנט אקספלורר!

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

שאלות נפוצות (FAQs) בנושא טפסים HTML ובדיקת מגבלות