הערה:

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

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

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

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

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

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

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

מצב Initial

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

מצב Focus

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

מצב Valid

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

מצב Invalid

מצב רכיב Widget כשהמשתמש הזין טקסט בתבנית לא חוקית. (לדוגמה, 06 לשנה במקום 2006).

מצב Required

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

מצב Minimum Number Of Characters

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

מצב Maximum Number Of Characters

מצב רכיב 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 מסוג אימות שדה טקסט

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

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

הערה:

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

ציון סוג ותבנית אימות

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

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

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

סוג אימות

Format

אין

לא דרושה תבנית מסוימת.

Integer

שדה הטקסט מקבל מספרים בלבד.

Email Address

שדה הטקסט מקבל כתובות דוא"ל הכוללות את התו @ ונקודה (.) עם קידומת וסיומת של אות אחת לפחות.

Date

תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector.

Time

תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector. ‏(“tt” מייצג תבנית am/pm‏. “t” מייצג תבנית a/p).

Credit Card

תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector. ניתן לבחור לקבל את כל כרטיסי האשראי, או לציין סוג מסוים של כרטיסי אשראי (MasterCard‏, Visa וכולי). שדה הטקסט אינו מקבל רווחים במספרי כרטיסי אשראי, למשל: 4321 3456 4567 4567.

Zip Code

תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector.

Phone Number

שדה הטקסט מקבל מספרי טלפון בתבנית של ארה"ב וקנדה (000) 000-0000 או תבניות מותאמות אישית. אם תבחר בתבנית מותאמת אישית, הזן את התבנית, לדוגמה ‏‎000.00(‎‎‎0‎‎0)‎, בתיבת הטקסט Pattern.

Social Security Number

שדה הטקסט מקבל מספרים בביטוח לאומי בתבנית 000-00-0000. אם ברצונך להשתמש בתבנית אחרת, בחר Custom כסוג האימות וציין תבנית. מנגנון אימות התבנית מקבל רק תווי ASCII.

Currency

שדה הטקסט מקבל מטבעות בתבנית 1,000,000.00 או 1.000.000,00.

Real Number/Scientific Notation

מאמת סוגים שונים של מספרים: מספרים שלמים (לדוגמה, 1); ערכים עשרוניים (לדוגמה, 12.123); וערכים עשרוניים בתבנית מדעית (לדוגמה 1.212e+12‏, 1.221e-12 כאשר e הוא בחזקת 10).

IP Address

תבניות שונות.‎ בחר אפשרות מהתפריט הנפתח Format ב-Property inspector.

URL

שדה הטקסט מקבל כתובות URL בתבנית http://xxx.xxx.xxx או FTP://xxx.xxx.xxx.

Custom

מאפשר לציין סוג אימות ותבנית מותאמים אישית. הזן את התבנית (והעצה במקרה הצורך) ב-Property inspector. מנגנון אימות התבנית מקבל רק תווי ASCII.

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

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

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

    Blur

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

    Change

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

    Submit

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

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

אפשרות זו זמינה רק לסוגי האימות None‏, Integer‏, E-mail Address ו-URL.

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

קביעת ערכי מינימום ומקסימום

אפשרות זו זמינה לסוגי האימות Integer‏, Time‏, Currency ו-Real Number/Scientific Notation.

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

הצגת מצבי רכיב 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, בהתאם להעדפותיך.

יצירת עצה לשדה טקסט

מאחר שיש סוגי תבניות רבים לשדות טקסט, יועיל אם תיתן למשתמשים עצות לגבי תבנית הנתונים שהם צריכים להזין. לדוגמה, שדה טקסט שהוגדר לסוג האימות Phone Number יקבל רק מספרי טלפון בצורה ‎(000) 000-0000. ניתן להזין מספרים אלה לדוגמה כעצה, כך ששדה הטקסט יציג את התבנית הנכונה כשהמשתמש יטען את הדף בדפדפן.

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

חסימת תווים לא חוקיים

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

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

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

למרות שמפקח המאפיינים מאפשר לבצע פעולות עריכה פשוטות ברכיב 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 מסוג אימות שדה טקסט מופיעות באדום עם גבול בעובי פיקסל אחד מסביב לטקסט.

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

    טקסט לשינוי

    כלל CSS מתאים

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

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

    .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

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

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

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

    צבע לשינוי

    כלל CSS מתאים

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

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

    .textfieldValidState input, input.textfieldValidState

    background-color: #B8F5B1;‎

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

    input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input

    background-color: #FF9F9F;‎

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

    .textfieldFocusState input, input.textfieldFocusState

    background-color: #FFFFCC;

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת