וולידציה ב HTML5

וולידציה ב HTML5

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

ניתן פה דוגמאות לוולידציות אפשריות ונסביר.

 

לאפשר את השדה רק לקריאה ולא לעריכה

<input type="text" name="fname" value="net jos" readonly>

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

<input type="text" name="fname" value="Jos" disabled>

ניתן לקבוע גודל מקסימאלי לקלט מהמשתמש

<input type="text" name="fname" maxlength="20">

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

<input type="text" name="fname" value="Jos" size="20">

ע"י הוספת required אנחנו מציינים שהשדה הזה הוא שדה חובה ואי אפשר להשאיר אותו ריק

<input type="text" name="user" required>

 

min ו max בשדה number

נתפוס פה 2 ציפורים במכה קודם כל שדה עם type = number  אומר שאפשר להכניס שם רק מספר ואפשר גם להגביל אותו ע"י min ו max  וכמובן גם ע"י רק אחד מהם.

<input type="number" name="age" min="1" max="5">

 

number בדילוגים :

בדוגמא הבאה ניתן להכניס מספר בדילוגים של 2 או שלילי או חיובי כלומר זוגי אם נעשה גם min = 0  אז נתחיל מ – 0

<input type="number" name="zogi" step="2">

 

וולידצית מייל :

כאשר נרשום מייל שגוי אז נקבל שגיאה אחד הבשורות לדעתי הטובות ביותר חסל כל ה patern למיניהם ב js או בדיקת שטרודל וכו…

ניתן גם על אותו אופן להשתמש ב phone, number, url

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

אם בכל זאת נבחר שאנחנו לא רוצים לעשות ולידציה ולהשתמש ב type = email בשביל סדר קידום וכו…

נוסיף לשורת הפורום את זה

<form action="" novalidate>

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

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

 

 

משייך שדה ל form גם מחוץ ל form

 <form action="" id="my_form1">
  full name: <input type="text" name="fname"><br />
  <input type="submit" value="Submit">
</form>

number: <input type="text" name="number" form="my_form1">

 

עוד על ולידציה ב HTML5

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

ניתן גם לבדוק ב JS ע"י הפונקציה הזו

.checkValidity()

אם הווליצדיה מתקיימת

דוגמא :

var inpObj = document.getElementById("inputID");
if (inpObj.checkValidity())