בחר Insert > Spry > Spry Validation Confirm.
עודכן לאחרונה בתאריך
20 במאי 2021
הערה:
רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
אודות רכיב Widget מסוג אימות אישור
רכיב 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 מסוג אימות אישור
הוספת רכיב Widget מסוג אימות אישור
-
-
הגדר את האפשרויות בתיבת הדו-שיח Input Tag Accessibility Attributes ולחץ על OK.
הערה:
ניתן גם להוסיף רכיב Widget מסוג אימות אישור בעזרת הקטגוריה Spry בחלונית Insert.
שינוי מצב דרוש של רכיב Widget מסוג אימות אישור
כברירת מחדל, כל רכיבי Widget מסוג אימות אישור שתוסיף בעזרת Dreamweaver דורשים קלט של המשתמש כשהם מתפרסמים באתר אינטרנט. עם זאת, תוכל להגדיר שמילוי שדות הטקסט לאישור על-ידי המשתמש יהיה אופציונלי.
-
בחר רכיב Widget מסוג אימות אישור בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
-
ב-Property inspector (Window > Properties), סמן או בטל את הסימון באפשרות Required, בהתאם להעדפותיך.
ציון שדה הטקסט שיש לבצע מולו את האימות
-
בחר רכיב Widget מסוג אימות אישור בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
-
ב-Property inspector (Window > Properties), בחר בשדה הטקסט שברצונך לבצע מולו את האימות בעזרת בחירת שדה טקסט מהתפריט הנפתח Validate Against. כל שדות הטקסט שהוקצו להם מזהים ייחודיים יופיעו כאפשרויות בתפריט הנפתח.
הצגת מצבי רכיב Widget בתצוגת Design
-
בחר רכיב Widget מסוג אימות אישור בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
-
ב-Property inspector (Window > Properties), בחר במצב שברצונך לראות מהתפריט הנפתח Preview States. לדוגמה, אם ברצונך לראות רכיב Widget במצבו החוקי, בחר Valid.
קביעה מתי יתבצע האימות
ניתן להגדיר מתי יתבצע האימות – כשמבקר באתר לוחץ מחוץ לרכיב Widget, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.
-
בחר רכיב Widget מסוג אימות אישור בחלון Document בלחיצה על הכרטיסייה הכחולה של הרכיב.
-
ב-Property inspector (Window > Properties), בחר באפשרות המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.
Blur
מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט של האישור.
Change
מבצע אימות כשהמשתמש משנה טקסט בתוך שדה הטקסט של האישור.
Submit
מבצע אימות כשהמשתמש מנסה למסור את הטופס. אפשרות המסירה נבחרת כברירת מחדל, ולא ניתן לבטל את הבחירה בה.
התאמה אישית של רכיב Widget מסוג אישור
למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב 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 של החלונית.
קביעת סגנון לרכיב Widget מסוג אימות אישור (הנחיות כלליות)
-
פתח את הקובץ SpryValidationConfirm.css.
-
אתר את כלל CSS לשינוי חלק מהרכיב. לדוגמה, לשינוי צבע הרקע של מצב נדרש של רכיב Widget מסוג אימות אישור, ערוך את הכלל input.confirmRequiredState בקובץ SpryValidationConfirm.css file.
-
הכנס שינויים בכלל CSS ושמור את הקובץ.
הקובץ SpryValidationConfirm.css כולל הערות מפורטות, המסבירות את הקוד ואת המטרה של כללים מסוימים. למידע נוסף, ראה ההערות בקובץ.
סגנון טקסט הודעת שגיאה ברכיב Widget מסוג אימות אישור
כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות אישור מופיעות באדום, עם גבול אחיד בעובי פיקסל אחד מסביב לטקסט.
-
לשינוי סגנון הטקסט של רכיב Widget מסוג אימות אישור, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.
טקסט לשינוי
כלל CSS מתאים
מאפיינים רלוונטיים לשינוי
טקסט של הודעת שגיאה
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
שינוי צבעי רקע של רכיב Widget מסוג אימות אישור
-
לשינוי צבעי הרקע של רכיב 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;
