10 בספט׳ 2012

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

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

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

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

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



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

1. אימייל - פקד שמטרתו לקבל כתובת אימייל
<input type="email" >
2. כתובת אינטרנט - פקד שמטרתו לקבל כתובות אינטרנט
<input type="url" >
3. מספרים - כשמו כן הוא פקד שמטרתו לקבל מספרים, מקבל 4 attribute יחודיים, מספר מינימום ומקסימום, מקדם(ישנם חצים שניתן ללחוץ אליהם ויקדמו את המספר במספר שהגדרנו), וערך התחלתי.
<input type="number
min="0"
max="10"
step="2"
value="6">


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

1. placeholder - מגדיר טקסט שיופיע בשדה מסוג הזנת תוכן במידה והוא ריק, ולא נמצא ב focus.
syntax
<input type="email" placeholder="please enter valid email" />

לדוגמא בקוד 

2. required - מגדיר את השדה כשדה חובה, אין צורך לתת לו ערך כלשהוא.
syntax
<input type="email" placeholder="please enter valid email" required  />

3. autofocus - שם פוקוס לשדה שבו הוא רשום, מן הסתם אפשר/רצוי לשים רק אחד בדף
syntax
<input type="email" placeholder="please enter valid email" autofocus />

פסדו 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.

דוגמא לפקד
<input type="emailplaceholder="please enter valid email" required  />

דוגמא ל CSS מתאים
input[type="email"]:required{}

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

דוגמא - ישפיע כאשר ניהיה בפוקוס על פקד שחובה להזין בו תוכן
input[type="email"]:focus:required{}



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

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


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

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