בחר Insert > Spry > Spry Validation Text Field.
עודכן לאחרונה בתאריך
May 20, 2021 01:00:04 PM GMT
הערה:
רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry.
אודות רכיב Widget מסוג אימות שדה טקסט
רכיב Widget של Spry מסוג אימות שדה טקסט הוא שדה טקסט המציג מצבים חוקיים או לא חוקיים כשמבקר באתר מזין בו טקסט. לדוגמה, ניתן להוסיף רכיב 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 מסוג אימות שדה טקסט
-
-
הגדר את האפשרויות בתיבת הדו-שיח Input Tag Accessibility Attributes ולחץ על OK.
הערה:
ניתן גם להוסיף רכיב Widget מסוג אימות שדה טקסט בעזרת הקטגוריה Spry בחלונית Insert.
ציון סוג ותבנית אימות
ניתן לציין סוגי אימות לרכיב Widget מסוג אימות שדה טקסט. לדוגמה, ניתן לציין סוג אימות כרטיס אשראי בשדה טקסט שיקבל מספרי כרטיסי אשראי.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), בחר סוג אימות מתפריט Type.
-
במקרה הצורך, בחר תבנית מתפריט 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(00), בתיבת הטקסט 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, כשהוא מקליד, או כשהוא מנסה למסור את הטופס.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties) בחר באפשרות המציינת מתי ברצונך שהאימות יתבצע. ניתן לבחור בכל האפשרויות או באפשרות Submit בלבד.
Blur
מבצע אימות בכל פעם שמשתמש לוחץ מחוץ לשדה הטקסט.
Change
מבצע אימות כשהמשתמש משנה טקסט בתוך שדה טקסט.
Submit
מבצע אימות כשהמשתמש מנסה למסור את הטופס. אפשרות המסירה נבחרת כברירת מחדל, ולא ניתן לבטל את הבחירה בה.
קביעת מספר תווים מינימלי ומקסימלי
אפשרות זו זמינה רק לסוגי האימות None, Integer, E-mail Address ו-URL.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), הקלד מספר בתיבה Min Chars או Max Chars. לדוגמה, אם תזין 3 בתיבה Min Chars, הרכיב יבצע אימות רק אם המשתמש יזין 3 תווים או יותר.
קביעת ערכי מינימום ומקסימום
אפשרות זו זמינה לסוגי האימות Integer, Time, Currency ו-Real Number/Scientific Notation.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), הקלד מספר בתיבה Min Value או Max Value. לדוגמה, אם תזין 3 בתיבה Min Value, הרכיב יבצע אימות רק אם המשתמש יזין את המספר 3 או ערך גדול יותר (4, 5, 6, וכולי) בשדה הטקסט.
הצגת מצבי רכיב Widget בתצוגת Design
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), בחר במצב שברצונך לראות מהתפריט הנפתח Preview States. לדוגמה, אם ברצונך לראות רכיב Widget במצבו החוקי, בחר Valid.
שינוי מצב דרוש של שדה טקסט
כברירת מחדל, כל רכיבי widget מסוג אימות שדה טקסט שתוסיף בעזרת Dreamweaver דורשים קלט של המשתמש כשהם מתפרסמים באתר אינטרנט. עם זאת, תוכל להגדיר שמילוי שדות הטקסט על-ידי המשתמש יהיה אופציונלי.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), סמן או בטל את הסימון באפשרות Required, בהתאם להעדפותיך.
יצירת עצה לשדה טקסט
מאחר שיש סוגי תבניות רבים לשדות טקסט, יועיל אם תיתן למשתמשים עצות לגבי תבנית הנתונים שהם צריכים להזין. לדוגמה, שדה טקסט שהוגדר לסוג האימות Phone Number יקבל רק מספרי טלפון בצורה (000) 000-0000. ניתן להזין מספרים אלה לדוגמה כעצה, כך ששדה הטקסט יציג את התבנית הנכונה כשהמשתמש יטען את הדף בדפדפן.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-Property inspector (Window > Properties), הקלד עצה בתיבת הטקסט Hint.
חסימת תווים לא חוקיים
ניתן למנוע מהמשתמשים להזין תווים לא חוקיים ברכיב Widget מסוג אימות שדה טקסט. לדוגמה, אם תבחר באפשרות זו לרכיב Widget שהוגדר עם סוג האימות Integer, לא יוצג דבר בשדה הטקסט אם המשתמש ינסה להקליד אות.
-
בחר רכיב Widget מסוג אימות שדה טקסט בחלון Document.
-
ב-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 מסוג אימות שדה טקסט מופיעות באדום עם גבול בעובי פיקסל אחד מסביב לטקסט.
-
לשינוי סגנון הטקסט של רכיב Widget מסוג אימות שדה טקסט, היעזר בטבלה הבאה לאיתור כלל CSS המתאים, ושנה את מאפייני ברירת המחדל, או הוסף מאפייני וערכי סגנון טקסט משלך.
טקסט לשינוי
כלל CSS מתאים
מאפיינים רלוונטיים לשינוי
טקסט של הודעת שגיאה
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
שינוי צבעי רקע של רכיב Widget מסוג אימות שדה טקסט
-
לשינוי צבעי הרקע של רכיב 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;
פריטים דומים נוספים
כניסה לחשבון