שימוש ברכיב Widget מסוג אימות אזור טקסט של Spry ב-Dreamweaver

חפש
הערה:

רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry‏.

אודות רכיב Widget מסוג אימות אזור טקסט

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

הדוגמה הבאה מציגה רכיב Widget מסוג אימות אזור טקסט במצבים שונים:

רכיב Widget מסוג אימות אזור טקסט במצבים שונים

A. מונה תווים שנותרו B. התמקדות ברכיב Widget של אזור טקסט, במצב מספר מקסימלי של תווים C. התמקדות ברכיב Widget של אזור טקסט, במצב חוקי D. רכיב Widget של אזור טקסט, במצב דרוש E. מונה תווים שהוקלדו 

רכיב Widget מסוג אימות אזור טקסט כולל מספר מצבים (לדוגמה, חוקי, לא חוקי, ערך דרוש וכולי). ניתן לשנות את המאפיינים של מצבים אלה בעזרת מפקח המאפיינים, בהתאם לתוצאות האימות הרצויות. רכיב Widget מסוג אימות אזור טקסט יכול לבצע אימות במספר שלבים – לדוגמה, כשמבקר באתר לוחץ מחוץ לרכיב, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.

מצב Initial

מצב רכיב Widget כשהדף נטען בדפדפן, או כשמשתמש מאפס טופס.

מצב Focus

מצב רכיב Widget כשמשתמש מציב את נקודת ההכנסה בתוך הרכיב.

מצב Valid

מצב רכיב Widget כשמשתמש הזין מידע כהלכה וניתן למסור את הטופס.

מצב Required

מצב רכיב Widget כשהמשתמש לא הזין טקסט כלל.

מצב Minimum Number Of Characters

מצב רכיב Widget כשהמשתמש הזין פחות מהמספר המינימלי של תווים הדרוש באזור הטקסט.

מצב Maximum Number Of Characters

מצב רכיב Widget כשהמשתמש הזין יותר מהמספר המקסימלי של תווים המותר באזור הטקסט.

כל פעם שרכיב Widget מסוג אימות אזור טקסט מזין אחד ממצבים אלה עקב אינטראקציה של המשתמש, הלוגיקה של Spry מחילה מחלקת CSS מוגדרת על מכל HTML של רכיב Widget בזמן הריצה. לדוגמה, אם משתמש מנסה למסור טופס, אך לא הזין טקסט באזור הטקסט, Spry מחיל מחלקה על רכיב Widget זה הגורמת לו להציג את הודעת השגיאה "יש להזין ערך". הכללים השולטים בסגנון ובתצוגה של הודעות השגיאה קיימים בקובץ CSS הנלווה לרכיב Widget ‏– SpryValidationTextArea.css.

קוד HTML של ברירת המחדל לרכיב Widget מסוג אימות אזור טקסט, בדרך כלל בתוך טופס, כולל תג מכל <span> ובתוכו תג <textarea> של אזור הטקסט. קוד HTML לרכיב Widget מסוג אימות אזור טקסט כולל גם תגי script בכותרת המסמך ולאחר סימן HTML של הרכיב.

להסבר מקיף בנושא אופן הפעולה של רכיבי Widget מסוג אימות אזור טקסט, כולל ניתוח מפורט של הקוד של רכיב מסוג זה, ראה www.adobe.com/go/learn_dw_sprytextarea_il.

הוספה ועריכה של רכיב Widget מסוג אימות אזור טקסט

הוספת רכיב Widget מסוג אימות אזור טקסט

  1. בחר Insert >‏ Spry >‏ Spry Validation Textarea.
  2. הגדר את האפשרויות בתיבת הדו-שיח Input Tag Accessibility Attributes ולחץ על OK.
הערה:

ניתן גם להוסיף רכיב Widget מסוג אימות אזור טקסט בעזרת הקטגוריה Spry בחלונית Insert.

קביעה מתי יתבצע האימות

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

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties) בחר באפשרות Validate On המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.

    Blur

    מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט.

    Change

    מבצע אימות כשהמשתמש משנה טקסט בתוך שדה טקסט.

    Submit

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

קביעת מספר תווים מינימלי ומקסימלי

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), הקלד מספר בתיבה Min Chars או Max Chars. לדוגמה, אם תזין 20 בתיבה Min Chars, הרכיב יבצע אימות רק אם המשתמש יזין 20 תווים או יותר.

הוספת מונה תווים

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

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר באפשרות Chars Count או Chars Remaining.
    הערה:

    האפשרות Chars Remaining זמינה רק אם כבר הגדרת מספר תווים מקסימלי מותר.

הצגת מצבי רכיב Widget בתצוגת Design

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר במצב שברצונך לראות מהתפריט הנפתח Preview States. לדוגמה, אם ברצונך לראות רכיב Widget במצבו החוקי, בחר Valid.

שינוי מצב דרוש של אזור טקסט

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

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), סמן או בטל את הסימון באפשרות Required, בהתאם להעדפותיך.

יצירת עצה לאזור טקסט

ניתן להוסיף עצה לאזור טקסט (לדוגמה, "הקלד כאן תיאור"), כדי לאפשר למשתמשים לדעת איזה סוג מידע עליהם להזין באזור הטקסט. אזור הטקסט מציג את הטקסט של העצה כשהמשתמש טוען את הדף בדפדפן.

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), הקלד עצה בתיבת הטקסט Hint.

חסימת תווים מיותרים

ניתן למנוע מהמשתמשים להזין יותר ממספר התווים המקסימלי המותר ברכיב Widget מסוג אימות אזור טקסט. לדוגמה, אם תבחר אפשרות זו לרכיב Widget שהוגדר לקבל לא יותר מ-20 תווים, המשתמש לא יוכל להקליד יותר מ-20 תווים באזור הטקסט.

  1. בחר רכיב Widget מסוג אימות אזור טקסט בחלון Document.
  2. ב-Property inspector ‏(Window >‏ Properties), בחר באפשרות Block Extra Characters.

התאמה אישית של רכיב Widget מסוג אימות אזור טקסט

למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב Widget מסוג אימות אזור טקסט, הוא אינו תומך בסגנון עיצוב מותאם אישית. ניתן לשנות את כלל CSS לרכיב Widget מסוג אימות אזור טקסט, כדי שתוכל ליצור רכיב בסגנון הרצוי לך. לרשימה מתקדמת של משימות סגנון, ראה www.adobe.com/go/learn_dw_sprytextarea_custom_il.

כל כללי CSS בנושאים הבאים מתייחסים לכללי ברירת המחדל המאוחסנים בקובץ SpryValidationTextArea.css. Dreamweaver שומר את הקובץ SpryValidationTextArea.css בתיקייה SpryAssets באתר כל פעם שאתה יוצר רכיב Widget של Spry מסוג אימות אזור טקסט. עיון בקובץ זה יכול להועיל, משום שהוא כולל מידע לגבי סגנונות שונים החלים על רכיב זה.

הערה:

למרות שניתן בקלות לערוך כללים לרכיב Widget מסוג אימות אזור טקסט ישירות בקובץ CSS, ניתן גם להשתמש בחלונית CSS Styles כדי לערוך את סגנון CSS של הרכיב. החלונית CSS Styles עוזרת לאתר מחלקות CSS שהוקצו לחלקים שונים של רכיב Widget, במיוחד אם אתה משתמש במצב Current של החלונית.

סגנון טקסט הודעת שגיאה ברכיב Widget מסוג אימות אזור טקסט

כברירת מחדל, הודעות שגיאה לרכיב Widget מסוג אימות אזור טקסט מופיעות באדום עם גבול בעובי פיקסל אחד מסביב לטקסט.

  1. לשינוי סגנון הטקסט של רכיב Widget מסוג אימות אזור טקסט, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.

    טקסט לשינוי

    כלל CSS מתאים

    מאפיינים רלוונטיים לשינוי

    טקסט של הודעת שגיאה

    		 .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

שינוי צבעי רקע של רכיב Widget מסוג אימות אזור טקסט

  1. לשינוי צבעי הרקע של רכיב Widget מסוג אימות אזור טקסט במצבים שונים, השתמש בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את ערכי ברירת המחדל של צבע הרקע:

    צבע רקע לשינוי

    כלל CSS מתאים

    מאפיין רלוונטי לשינוי

    צבע רקע של רכיב Widget במצב חוקי

    		 .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;‎

    צבע רקע של רכיב Widget במצב לא חוקי

    		 textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

    background-color: #FF9F9F;‎

    צבע רקע של רכיב Widget במצב התמקדות

    		 .textareaFocusState textarea, textarea.textareaFocusState

    background-color: #FFFFCC;

פריטים דומים נוספים

לוגו של Adobe

כניסה לחשבון

קישורים מהירים

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

Legal Notices    |    Online Privacy Policy