ולידציות בטפסים ב HTML5 ללא JS, בשילוב עם CSS3

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

ה tutorial הזה יראה חלק קטן מהיכולות הגלומות  בפקדים החדשים של HTML5 עם השילוב של CSS3.

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

אז בואו נתחיל!

הפקדים החדשים של HTML5 שנשתמש בדוגמא (ישנם פקדים נוספים)

1. אימייל - פקד שמטרתו לקבל כתובת אימייל


 

2. כתובת אינטרנט – פקד שמטרתו לקבל כתובות אינטרנט

 

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


 

attributes חדשים הנתמכים מHTML5

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

syntax

 

לדוגמא בקוד 

2. required - מגדיר את השדה כשדה חובה, אין צורך לתת לו ערך כלשהוא.
syntax


 

3. autofocus - שם פוקוס לשדה שבו הוא רשום, מן הסתם אפשר/רצוי לשים רק אחד בדף
syntax


 

פסדו class חדשים ב CSS3 לפקדים (pseudo class)

פסדו class (הגדרה) – הם classים שלא דורשים יצוג על האלמנט, הבולט והמוכר ביניהם הוא hover,שמתשמשים בו כדי לוהסיף עיצוב למעבר עכבר.
  • valid – שדה ולידי אחרי הזנת תוכן.
  • invalid – שדה עם קלט שגוי.
  • required – שדה חובה.
  • optional – שדה שהוא לא חובה.
  • in-range – שדה מסוג מספר שנמצא בטווח המספרים.
  • out-of-range – שדה מסוג מספר שחורג מהטווח שלו
  • read-only – שדה במצב  קריאה בלבד
  • read-write – שדה במצב רגיל.
הפסדו class שמצוינים כאן טובים רק לפקדים, והשימוש בהם מתאים בהתאם לפקד שנרצה להשתמש, לדוגמא פסאדו class מסוג required, יהיה טוב רק לאלמנט מסוג פקד שיש לו attribute מסוג required.

דוגמא לפקד


 

דוגמא ל CSS מתאים

 

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

דוגמא – ישפיע כאשר ניהיה בפוקוס על פקד שחובה להזין בו תוכן


 

אז בואו נשלב את כל האופציות

אני מצרף דוגמא שמשלבת את הפקדים החדשים של html5, עם בדיקת ולידציה ברגע שמזינים תוכן(ב focus), בנוסף במידה והתוכן ולידי אנחנו מקבלים ולידיציה שמאשרת לנו שהתוכן שהוקש תקין.
בנוסף כדי לשכלל את הדוגמא, הוספתי בדוגמא יצירת הודעת שגיאה/הודעות ולידציה תיקניות, שמגיעות מה CSS, ע”י שימוש ב style מסוג content, וע”י שימוש בפסאדו class מסוג before(אפשר גם after…).
כפי שראיתם בדוגמא, ניתן ליצור בקלות רבה יחסית טפסים עם ולידציות שלא מצריכות javascript כלשהוא, ניתן לעשות כמובן משחקים מורכבים יותר, ואם יש למשהוא שאלה/ות בנושא אשמח שתטקבקו לי…

refrence ודוגמאות נוספות

 

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

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

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">