עבודה עם רכיב Widget מסוג אימות שדה טקסט של Spry ב-Adobe Dreamweaver
עבודה עם רכיב Widget מסוג אימות שדה טקסט‬ של Spry
אודות רכיב Widget מסוג אימות שדה טקסט
הוספה ועריכה של רכיב Widget מסוג אימות שדה טקסט
התאמה אישית של רכיב Widget מסוג אימות שדה טקסט
רכיב Widget של Spry מסוג אימות שדה טקסט הוא שדה טקסט המציג מצבים חוקיים או לא חוקיים כשמבקר באתר מזין בו טקסט. לדוגמה, ניתן להוסיף רכיב Widget מסוג אימות שדה טקסט לטופס, שמבקרים באתר מקלידים בו כתובות דוא"ל. אם הם אינם מקלידים את הסימן @ ונקודה בכתובת הדוא"ל, רכיב Widget מחזיר הודעה המציינת שהמידע שהזין המשתמש אינו חוקי.
הדוגמה הבאה מציגה רכיב Widget מסוג אימות שדה טקסט במצבים שונים:
רכיב Widget מסוג אימות שדה טקסט
A. רכיב Widget מסוג שדה טקסט, עם עצה מופעלת B. רכיב Widget מסוג שדה טקסט, מצב חוקי C. רכיב Widget מסוג שדה טקסט, מצב לא חוקי D. רכיב Widget מסוג שדה טקסט, מצב דרוש
רכיב Widget מסוג אימות שדה טקסט כולל מספר מצבים (לדוגמה, חוקי, לא חוקי, ערך דרוש וכולי). ניתן לשנות את המאפיינים של מצבים אלה ב-Property inspector, בהתאם לתוצאות האימות הרצויות. רכיב Widget מסוג אימות שדה טקסט יכול לבצע אימות במספר שלבים – לדוגמה, כשמבקר באתר לוחץ מחוץ לרכיב, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.
מצב רכיב Widget כשמשתמש מציב את נקודת ההכנסה בתוך הרכיב.
מצב רכיב Widget כשמשתמש הזין מידע כהלכה וניתן למסור את הטופס.
מצב רכיב Widget כשהמשתמש הזין טקסט בתבנית לא חוקית. (לדוגמה, 06 לשנה במקום 2006).
מצב רכיב Widget כשהמשתמש לא הצליח להזין טקסט דרוש בשדה הטקסט.
מצב רכיב Widget כשהמשתמש הזין פחות מהמספר המינימלי של תווים הדרוש בשדה הטקסט.
מצב רכיב Widget כשהמשתמש הזין יותר מהמספר המקסימלי של תווים המותר בשדה הטקסט.
מצב Minimum Value
מצב רכיב Widget כשהמשתמש הזין ערך קטן מהערך הדרוש בשדה הטקסט. ‏(חל על אימות מספר שלם, מספר ממשי וסוג נתונים).
מצב Maximum Value
מצב רכיב Widget כשהמשתמש הזין ערך גדול מהערך המקסימלי המותר בשדה הטקסט. ‏(חל על אימות מספר שלם, מספר ממשי וסוג נתונים).
כל פעם שרכיב Widget מסוג אימות שדה טקסט מזין אחד ממצבים אלה עקב אינטראקציה של המשתמש, הלוגיקה של Spry מחילה מחלקת CSS מוגדרת על מכל HTML של רכיב Widget בזמן הריצה. לדוגמה, אם משתמש מנסה למסור טופס, אך לא הזין טקסט בשדה טקסט דרוש, Spry מחיל מחלקה על רכיב Widget זה הגורמת לו להציג את הודעת השגיאה "יש להזין ערך". הכללים השולטים בסגנון ובתצוגה של הודעות השגיאה קיימים בקובץ CSS הנלווה לרכיב Widget ‏– SpryValidationTextField.css.
קוד HTML של ברירת המחדל לרכיב Widget מסוג אימות שדה טקסט, בדרך כלל בתוך טופס, כולל תג מכל <span> ובתוכו תג <input> של שדה הטקסט. קוד HTML לרכיב Widget מסוג אימות שדה טקסט כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של הרכיב.
להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג אימות שדה טקסט, כולל ניתוח מפורט של קוד רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_sprytextfield_il.
הוספת רכיב Widget מסוג אימות שדה טקסט
בחר Insert >‏ Spry >‏ Spry Validation Text Field.
ניתן גם להוסיף רכיב Widget מסוג אימות שדה טקסט בעזרת הקטגוריה Spry בחלונית Insert.
ציון סוג ותבנית אימות
ניתן לציין סוגי אימות לרכיב Widget מסוג אימות שדה טקסט. לדוגמה, ניתן לציין סוג אימות כרטיס אשראי בשדה טקסט שיקבל מספרי כרטיסי אשראי.
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
ב-Property inspector ‏(Window >‏ Properties), בחר סוג אימות מתפריט Type.
במקרה הצורך, בחר תבנית מתפריט Format.
רוב סוגי האימות גורמים לשדה הטקסט לצפות לתבנית סטנדרטית. לדוגמה, אם תחיל אימות מסוג מספר שלם על שדה טקסט, רכיב Widget לא יבצע אימות, אלא אם כן המשתמש יזין מספרים בשדה הטקסט. אך יש סוגי אימות המאפשרים לבחור בסוג התבנית שיקבל שדה הטקסט. הטבלה הבאה מציגה סוגי אימות ותבניות אימות הזמינים דרך מפקח המאפיינים:
סוג אימות
לא דרושה תבנית מסוימת.
שדה הטקסט מקבל מספרים בלבד.
שדה הטקסט מקבל כתובות דוא"ל הכוללות את התו @ ונקודה (.) עם קידומת וסיומת של אות אחת לפחות.
תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector.
תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector. ‏(“tt” מייצג תבנית am/pm‏. “t” מייצג תבנית a/p).
תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector. ניתן לבחור לקבל את כל כרטיסי האשראי, או לציין סוג מסוים של כרטיסי אשראי (MasterCard‏, Visa וכולי). שדה הטקסט אינו מקבל רווחים במספרי כרטיסי אשראי, למשל: 4321 3456 4567 4567.
שדה הטקסט מקבל מספרי טלפון בתבנית של ארה"ב וקנדה (000) 000-0000 או תבניות מותאמות אישית. אם תבחר בתבנית מותאמת אישית, הזן את התבנית, לדוגמה ‏‎000.00(‎‎‎0‎‎0)‎, בתיבת הטקסט Pattern.
שדה הטקסט מקבל מספרים בביטוח לאומי בתבנית 000-00-0000. אם ברצונך להשתמש בתבנית אחרת, בחר Custom כסוג האימות וציין תבנית. מנגנון אימות התבנית מקבל רק תווי ASCII.
שדה הטקסט מקבל מטבעות בתבנית 1,000,000.00 או 1.000.000,00.
Real Number/Scientific Notation
מאמת סוגים שונים של מספרים: מספרים שלמים (לדוגמה, 1); ערכים עשרוניים (לדוגמה, 12.123); וערכים עשרוניים בתבנית מדעית (לדוגמה 1.212e+12‏, 1.221e-12 כאשר e הוא בחזקת 10).
שדה הטקסט מקבל כתובות URL בתבנית http://xxx.xxx.xxx או FTP://xxx.xxx.xxx.
מאפשר לציין סוג אימות ותבנית מותאמים אישית. הזן את התבנית (והעצה במקרה הצורך) ב-Property inspector. מנגנון אימות התבנית מקבל רק תווי ASCII.
ב-Property inspector ‏(Window >‏ Properties) בחר באפשרות המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.
מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט.
מבצע אימות כשהמשתמש משנה טקסט בתוך שדה טקסט.
קביעת מספר תווים מינימלי ומקסימלי
אפשרות זו זמינה רק לסוגי האימות None‏, Integer‏, E-mail Address ו-URL.
ב-Property inspector ‏(Window >‏ Properties), הקלד מספר בתיבה Min Chars או Max Chars. לדוגמה, אם תזין 3 בתיבה Min Chars, הרכיב יבצע אימות רק אם המשתמש יזין 3 תווים או יותר.
קביעת ערכי מינימום ומקסימום
אפשרות זו זמינה לסוגי האימות Integer‏, Time‏, Currency ו-Real Number/Scientific Notation.
ב-Property inspector ‏(Window >‏ Properties), הקלד מספר בתיבה Min Value או Max Value. לדוגמה, אם תזין 3 בתיבה Min Value, הרכיב יבצע אימות רק אם המשתמש יזין את המספר 3 או ערך גדול יותר (4, 5, 6, וכולי) בשדה הטקסט.
שינוי מצב דרוש של שדה טקסט
כברירת מחדל, כל רכיבי widget מסוג אימות שדה טקסט שתוסיף בעזרת Dreamweaver דורשים קלט של המשתמש כשהם מתפרסמים באתר אינטרנט. עם זאת, תוכל להגדיר שמילוי שדות הטקסט על-ידי המשתמש יהיה אופציונלי.
יצירת עצה לשדה טקסט
מאחר שיש סוגי תבניות רבים לשדות טקסט, יועיל אם תיתן למשתמשים עצות לגבי תבנית הנתונים שהם צריכים להזין. לדוגמה, שדה טקסט שהוגדר לסוג האימות Phone Number יקבל רק מספרי טלפון בצורה ‎(000) 000-0000. ניתן להזין מספרים אלה לדוגמה כעצה, כך ששדה הטקסט יציג את התבנית הנכונה כשהמשתמש יטען את הדף בדפדפן.
ב-Property inspector ‏(Window >‏ Properties), הקלד עצה בתיבת הטקסט Hint.
חסימת תווים לא חוקיים
ניתן למנוע מהמשתמשים להזין תווים לא חוקיים ברכיב Widget מסוג אימות שדה טקסט. לדוגמה, אם תבחר באפשרות זו לרכיב Widget שהוגדר עם סוג האימות Integer, לא יוצג דבר בשדה הטקסט אם המשתמש ינסה להקליד אות.
ב-Property inspector ‏(Window >‏ Properties), בחר באפשרות Enforce Pattern.
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אימות שדה טקסט, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כלל CSS לרכיב Widget מסוג אימות שדה טקסט, כדי שתוכל ליצור רכיב בסגנון הרצוי לך. לרשימה מתקדמת של משימות סגנון, ראה www.adobe.com/go/learn_dw_sprytextfield_custom_il.
כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל השמורים בקובץ SpryValidationTextField.css. Dreamweaver שומר את הקובץ SpryValidationTextField.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב Widget של Spry מסוג אימות שדה טקסט. עיון בקובץ זה יכול להועיל, משום שהוא כולל מידע לגבי סגנונות שונים החלים על רכיב זה.
למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אימות שדה טקסט ישירות בקובץ CSS, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.
סגנון טקסט הודעת שגיאה ברכיב Widget מסוג אימות שדה טקסט
כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות שדה טקסט מופיעות באדום עם גבול בעובי פיקסל אחד מסביב לטקסט.
לשינוי סגנון הטקסט של רכיב Widget מסוג אימות שדה טקסט, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.
שינוי צבעי רקע של רכיב Widget מסוג אימות שדה טקסט
לשינוי צבעי הרקע של רכיב Widget מסוג אימות שדה טקסט במצבים שונים, השתמש בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את ערכי ברירת המחדל של צבע הרקע: