3.6 טפסים וולידציה תרגול
תרגול טפסים וולידציה¶
תרגיל 1 - טופס התחברות בסיסי¶
בנו טופס התחברות (login) עם שם משתמש וסיסמה.
דרישות:
- שדה username (text) ושדה password (password)
- כפתור submit
- בשליחה, מנעו את טעינת הדף מחדש
- הדפיסו לקונסול אובייקט עם שני הערכים
- אם אחד השדות ריק, הציגו הודעה "all fields are required" מתחת לטופס
- אם שם המשתמש הוא "admin" והסיסמה היא "1234", הציגו הודעת "login successful"
- אחרת, הציגו "invalid username or password"
תרגיל 2 - ספירת תווים ומגבלות¶
בנו שדה textarea עם ספירת תווים חיה.
דרישות:
- שדה textarea עם מגבלה של 280 תווים (כמו טוויטר)
- מתחת לשדה, הציגו "X/280 characters"
- כשנשארו פחות מ-20 תווים, הספירה משנה צבע לכתום
- כשנשארו פחות מ-10 תווים, הספירה משנה צבע לאדום
- כשמגיעים ל-280, אי אפשר לכתוב יותר (maxlength)
- הוסיפו כפתור "post" שמוסיף את הטקסט לרשימה מתחת ומנקה את השדה
- הכפתור מושבת (disabled) כשהשדה ריק
תרגיל 3 - טופס הרשמה עם ולידציה בזמן אמת¶
בנו טופס הרשמה עם השדות הבאים ובצעו ולידציה בזמן אמת (על כל הקשה):
- שם מלא - חובה, לפחות 2 תווים
- אימייל - חובה, חייב להכיל @ ונקודה
- סיסמה - חובה, לפחות 8 תווים, חייב להכיל אות גדולה ומספר
- אישור סיסמה - חובה, חייב להיות זהה לסיסמה
- גיל - חובה, חייב להיות בין 16 ל-120
דרישות:
- כל שדה מקבל מסגרת אדומה + הודעת שגיאה כשלא תקין
- כל שדה מקבל מסגרת ירוקה כשתקין
- הוסיפו מד חוזק סיסמה (weak/fair/good/strong) שמתעדכן בזמן אמת
- כפתור ה-submit מושבת עד שכל השדות תקינים
- בשליחה, הציגו את הנתונים כאובייקט JSON מתחת לטופס
- נקו את הטופס אחרי שליחה מוצלחת
תרגיל 4 - טופס הזמנה עם FormData¶
בנו טופס הזמנת פיצה עם:
- שם (text)
- טלפון (tel)
- גודל פיצה (select: small, medium, large)
- תוספות (checkboxes: mushrooms, olives, onions, peppers, extra cheese)
- הערות (textarea)
- משלוח או איסוף עצמי (radio buttons)
דרישות:
- השתמשו ב-FormData לאיסוף כל הנתונים
- בשליחה, הציגו סיכום הזמנה מפורט מתחת לטופס (לא בקונסול)
- הסיכום צריך לכלול את כל הפרטים בפורמט קריא
- חשבו מחיר: small=40, medium=60, large=80. כל תוספת +5
- הציגו את המחיר הסופי בסיכום
- שם וטלפון הם חובה
תרגיל 5 - חיפוש ברשימה עם debounce¶
בנו שדה חיפוש שמסנן רשימה של 20 מדינות בזמן אמת.
דרישות:
- צרו מערך של 20 שמות מדינות באנגלית
- הציגו את כל המדינות כרשימה (ul)
- שדה חיפוש מסנן את הרשימה תוך כדי הקלדה
- השתמשו ב-debounce של 300 מילישניות - כדי שהסינון יקרה רק אחרי שהמשתמש מפסיק להקליד
- אם אין תוצאות, הציגו "no results found"
- הציגו מונה "showing X of 20 results"
- החיפוש לא רגיש לאותיות גדולות/קטנות (case insensitive)
תרגיל 6 - טופס עריכת פרופיל עם שמירה¶
בנו טופס פרופיל שמציג נתונים קיימים ומאפשר לערוך אותם.
דרישות:
- התחילו עם אובייקט של נתוני פרופיל:
let profile = {
name: "Dan Cohen",
email: "dan@email.com",
bio: "Web developer",
theme: "dark",
notifications: true
};
- בטעינת הדף, מלאו את השדות עם הנתונים הקיימים
- שדות: name (text), email (email), bio (textarea), theme (select: dark/light), notifications (checkbox)
- כפתור "save" שומר את השינויים ומעדכן את האובייקט
- כפתור "reset" מחזיר את הטופס לערכים המקוריים (לפני השינויים)
- הציגו הודעת "changes saved!" ירוקה אחרי שמירה שנעלמת אחרי 3 שניות
- הוסיפו ולידציה: שם חובה, אימייל חובה ותקין
- הציגו את שדה ה-theme כתצוגה מקדימה - כשמשנים את ה-select, שנו את צבע הרקע של הדף
תרגיל 7 - טופס רב-שלבי¶
בנו טופס הרשמה מחולק ל-3 שלבים:
שלב 1 - פרטים אישיים:
- שם מלא (text, required)
- אימייל (email, required)
- טלפון (tel)
שלב 2 - כתובת:
- עיר (text, required)
- רחוב (text, required)
- מיקוד (text, pattern: 7 ספרות)
שלב 3 - סיכום ואישור:
- הצגת כל הנתונים שנאספו
- checkbox של הסכמה לתנאים (required)
- כפתור שליחה
דרישות:
- הציגו שלב אחד בכל פעם (שאר השלבים מוסתרים)
- כפתורי "next" ו-"back" לניווט בין השלבים
- ולידציה בלחיצה על "next" - אי אפשר להתקדם אם יש שדות לא תקינים
- פס התקדמות (progress bar) שמראה באיזה שלב אנחנו (1/3, 2/3, 3/3)
- בשלב הסיכום, הציגו את כל הנתונים מכל השלבים
- בשליחה, הדפיסו את כל הנתונים כ-JSON לקונסול
- אנימציית מעבר חלקה בין שלבים (CSS transition)
תרגיל 8 - ולידציה מותאמת עם setCustomValidity¶
בנו טופס שמשתמש בולידציית HTML5 המובנית, אבל עם הודעות שגיאה מותאמות:
דרישות:
- שדה "username" עם pattern שמקבל רק אותיות ומספרים (3-15 תווים)
- שדה "email" עם type="email"
- שדה "website" עם type="url"
- שדה "age" עם min="18" ו-max="99"
- השתמשו ב-setCustomValidity() כדי להחליף את הודעות הדפדפן בהודעות בעברית
- השתמשו באירוע "invalid" לזיהוי סוג השגיאה (validity.valueMissing, validity.typeMismatch, validity.patternMismatch, validity.rangeUnderflow, validity.rangeOverflow)
- נקו את ה-customValidity כשהמשתמש מתחיל להקליד