רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
רכיב widge מסוג אמות אישור הוא שדה טקסט או שדה סיסמה בטופס המציג מצבים חוקיים או לא חוקיים, כשמשתמש מזין ערך שאינו מתאים לערך של שדה דומה באותו טופס. לדוגמה, ניתן להוסיף רכיב Widget מסוג אימות אישור לטופס הדורש שהמשתמש יקליד שוב את הסיסמה שציין בשדה קודם. אם המשתמש אינו מצליח להקליד את הסיסמה בדיוק כפי שרשם אותה קודם לכן, הרכיב יחזיר הודעת שגיאה שתציין שהערכים אינם זהים.
ניתן גם להשתמש ברכיב Widget מסוג אימות אישור בצירוף לרכיב Widget מסוג אימות שדה טקסט כדי לאמת כתובות דוא"ל.
יש להכיר את רכיבי Widget מסוג אימות של Spry לפני שתתחיל לעבוד עם רכיב אישור של Spry. If you’re not familiar with them, see עבודה עם רכיב Widget מסוג אימות שדה טקסט או כל אחת מהסקירות על יתר רכיבי Widget מסוג אימות לפני שתמשיך. בסקירה זו לא מוצגים כל המושגים הבסיסיים לגבי רכיבי Widget מסוג אימות.
האיור הבא מציג הגדרה טיפוסית לרכיב אישור:
A. שדה סיסמה או רכיב Widget מסוג אימות סיסמה B. רכיב Widget מסוג אישור
רכיב Widget מסוג אימות אישור כולל מספר מצבים (לדוגמה, חוקי, לא חוקי, ערך דרוש וכולי). ניתן לשנות את המאפיינים של מצבים אלה בעזרת עריכת קובץ CSS המתאים (SpryValidationConfirm.css), בהתאם לתוצאות האימות הרצויות. רכיב Widget מסוג אימות אישור יכול לבצע אימות במספר שלבים – לדוגמה, כשמבקר באתר לוחץ מחוץ לרכיב, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.
מצב Initial
המצב כשהדף נטען בדפדפן, או כשמשתמש מאפס את הטופס.
מצב Focus
כשהמשתמש ממקם את נקודת ההכנסה בתוך רכיב Widget.
מצב Valid
כשהמשתמש מזין נתונים כהלכה וניתן למסור את הטופס.
מצב Invalid
כשמשתמש מזין טקסט שאינו מתאים לטקסט שהוזן בשדה טקסט קודם, ברכיב Widget מסוג אימות שדה טקסט, או ברכיב Widget מסוג אימות סיסמה.
מצב Required
כשהמשתמש אינו מזין טקסט דרוש בשדה הטקסט.
להסבר מקיף יותר לגבי אופן הפעולה של רכיבי Widget מסוג אימות אישור, וכן מידע נוסף לגבי מבנה רכיבי Widget, ראה www.adobe.com/go/learn_dw_spryconfirm_il.
ניתן גם להוסיף רכיב Widget מסוג אימות אישור בעזרת הקטגוריה Spry בחלונית Insert.
כברירת מחדל, כל רכיבי Widget מסוג אימות אישור שתוסיף בעזרת Dreamweaver דורשים קלט של המשתמש כשהם מתפרסמים באתר אינטרנט. עם זאת, תוכל להגדיר שמילוי שדות הטקסט לאישור על-ידי המשתמש יהיה אופציונלי.
ניתן להגדיר מתי יתבצע האימות – כשמבקר באתר לוחץ מחוץ לרכיב Widget, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.
Blur
מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט של האישור.
Change
מבצע אימות כשהמשתמש משנה טקסט בתוך שדה הטקסט של האישור.
Submit
מבצע אימות כשהמשתמש מנסה למסור את הטופס. אפשרות המסירה נבחרת כברירת מחדל, ולא ניתן לבטל את הבחירה בה.
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אימות אישור, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כלל CSS לרכיב Widget מסוג אימות אישור, כדי שתוכל ליצור רכיב בסגנון הרצוי לך. לרשימה מתקדמת של משימות עיצוב סגנונות, ראה www.adobe.com/go/learn_dw_spryconfirm_custom_il.
כל כללי CSS בסעיפים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryValidationConfirm.css. Dreamweaver שומר את הקובץ SpryValidationConfirm.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב Widget של Spry מסוג אימות אישור. עיון בקובץ זה יכול להועיל, משום שהוא כולל מידע לגבי סגנונות שונים החלים על רכיב זה.
למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אימות אישור בקובץ CSS הנלווה, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.
פתח את הקובץ SpryValidationConfirm.css.
אתר את כלל CSS לשינוי חלק מהרכיב. לדוגמה, לשינוי צבע הרקע של מצב נדרש של רכיב Widget מסוג אימות אישור, ערוך את הכלל input.confirmRequiredState בקובץ SpryValidationConfirm.css file.
הכנס שינויים בכלל CSS ושמור את הקובץ.
הקובץ SpryValidationConfirm.css כולל הערות מפורטות, המסבירות את הקוד ואת המטרה של כללים מסוימים. למידע נוסף, ראה ההערות בקובץ.
כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות אישור מופיעות באדום, עם גבול אחיד בעובי פיקסל אחד מסביב לטקסט.
לשינוי סגנון הטקסט של רכיב Widget מסוג אימות אישור, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.
טקסט לשינוי |
כלל CSS מתאים |
מאפיינים רלוונטיים לשינוי |
---|---|---|
טקסט של הודעת שגיאה |
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg | color: #CC3333; border: 1px solid #CC3333; |
לשינוי צבעי הרקע של רכיב Widget מסוג אימות אישור במצבים שונים, השתמש בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את ערכי ברירת המחדל של צבע הרקע.
צבע לשינוי |
כלל CSS מתאים |
מאפיין רלוונטי לשינוי |
---|---|---|
צבע רקע של רכיב Widget במצב חוקי |
.confirmValidState input, input.confirmValidState | background-color: #B8F5B1; |
צבע רקע של רכיב Widget במצב לא חוקי |
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input | background-color: #FF9F9F; |
צבע רקע של רכיב Widget במצב התמקדות |
.confirmFocusState input, input.confirmFocusState | background-color: #FFFFCC; |
כניסה לחשבון