العمل باستخدام عنصر واجهة مستخدم Spry Validation Text Area في Dreamweaver

بحث
ملاحظة:

تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.

معلومات عن عنصر واجهة مستخدم Validation Text Area

عنصر واجهة مستخدم Spry Validation Text Area هو منطقة نصية تعرض الحالات الصالحة أو غير الصالحة عندما يُدخل المستخدم جُمل نصية قليلة. إذا كانت المنطقة النصية حقلاً مطلوبًا، ولم يُدخل المستخدم أي نص فيها، فسيعيد عنصر واجهة المستخدم رسالة مفادها أن القيمة مطلوبة.

يبين المثال التالي عنصر واجهة مستخدم Validation Text Area في حالات متنوعة:

عنصر واجهة مستخدم Validation Text Area في العديد من الحالات

A. عداد الحروف المتبقية B. عنصر واجهة مستخدم Text Area عند التركيز، حالة أقصى عدد للحروف C. عنصر واجهة مستخدم Text Area، حالة صالحة D. عنصر واجهة مستخدم Text Area، حالة مطلوبة E. عداد الحروف المكتوبة 

يتضمن عنصر واجهة مستخدم Validation Text Area عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات باستخدام عارض الخصائص، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Text Area إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر المستخدم خارج عنصر واجهة المستخدم، أو عندما يكتب، أو عندما يحاول تقديم النموذج.

الحالة Initial

حالة عنصر واجهة المستخدم عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.

الحالة Focus

حالة عنصر واجهة المستخدم عندما يضع المستخدم نقطة الإدراج في عنصر واجهة المستخدم.

الحالة Valid

حالة عنصر واجهة المستخدم بعدما دخل أدخل المستخدم المعلومات بشكل صحيح، ويمكن تقديم النموذج.

الحالة Required

حالة عنصر واجهة المستخدم إذا لم يقم المستخدم بإدخال أي نص.

الحالة Minimum Number Of Characters

حالة عنصر واجهة المستخدم بعدما أدخل المستخدم عددًا من الحروف أقل من العدد الأدنى المطلوب في منطقة النص.

الحالة Maximum Number Of Characters

حالة عنصر واجهة المستخدم بعدما أدخل المستخدم عددًا من الحروف أكثر من العدد الأدنى المسموح به في منطقة النص.

في أي وقت يقوم عنصر واجهة مستخدم Validation Text Area بإدخال إحدى هذه الحالات من خلال تفاعل المستخدم، يتم تطبيق منطق إطار عمل Spry لفئة CSS محددة على حاوية HTML لعنصر واجهة المستخدم في وقت التشغيل. على سبيل المثال، إذا حاول مستخدم تقديم نموذج، ولكنه لم يدخل نصًا في منطقة النص المطلوب، يطبق Spry فئة على عنصر واجهة المستخدم الذي يتسبب في عرض رسالة الخطأ، "A value is required". تتوفر القواعد، التي تتحكم في حالات تصميم رسائل الخطأ وعرضها، في ملف CSS المصاحب لعنصر واجهة المستخدم، SpryValidationTextArea.css.

تشتمل HTML الافتراضية لعنصر واجهة مستخدم Validation Text Area، الموجود عادةً داخل نموذج، على علامة <span> للحاوية والتي تحيط بالعلامة <textarea> الخاصة بمنطقة النص. تتضمن HTML لعنصر واجهة مستخدم Validation Text Area أيضًا علامات برنامج نصي أعلى المستند وبعد علامات التغيير في HTML لعنصر واجهة المستخدم.

للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Validation Text Area، بما في ذلك تحليل كامل للتعليمة البرمجية الخاصة بعنصر واجهة مستخدم Validation Text Area، راجع www.adobe.com/go/learn_dw_sprytextarea_ae.

إدراج عنصر واجهة مستخدم Validation Text Area وتحريره

إدراج عنصر واجهة مستخدم Validation Text Area

  1. حدد Insert > Spry > Spry Validation Textarea.
  2. أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.
ملاحظة:

يمكنك أيضًا إدخال عنصر واجهة مستخدم Validation Text Area باستخدام الفئة Spry في اللوحة Insert.

تحديد عن حدوث التحقق

يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر المستخدم خارج عنصر واجهة المستخدم، بينما يكتب المستخدم، أو عندما يحاول تقديم النموذج.

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الخيار Validate On الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.

    Blur

    التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج حقل النص.

    Change

    التحقق بينما يقوم المستخدم بتغيير النص داخل حقل النص.

    Submit

    التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.

تحديد أقصى وأدنى حد لعدد الحروف

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، أدخل رقمًا في المربع Min Chars أو Max Chars. على سبيل المثال، إذا أدخلت القيمة 20 في المربع Min Chars، فلن يُجري عنصر واجهة المستخدم عملية التحقق إلا إذا أدخل المستخدم 20 حرفًا أو أكثر في منطقة النص.

إضافة عداد حروف

يمكنك إضافة عداد حروف يتيح لمستخدميك معرفة عدد الحروف التي كتبوها، أو عدد الحروف المتبقية عند إدخال النص في منطقة النص. بشكل افتراضي، عند إضافة عداد حروف، يظهر العداد بالركن السفلي الأيمن خارج عنصر واجهة المستخدم.

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الخيار Chars Count أو Chars Remaining.
    ملاحظة:

    لا يتوفر الخيار Chars Remaining إلا إذا قم بالفعل بتعيين أقصى عدد للحروف المسموح بها.

عرض حالات عنصر واجهة المستخدم في طريقة العرض Design

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، إذا كنت تريد رؤية عنصر واجهة المستخدم في حالته الصالحة، فحدد Valid.

تغيير الحالة المطلوبة لمنطقة نص

افتراضيًا، تتطلب كل عناصر واجهة مستخدم Validation Text Area التي تقوم بإدراجها مع Dreamweaver إدخالًا من المستخدم عند نشرها على صفحة ويب. ومع ذلك، يمكنك جعل مناطق النص اختيارية للتحقق.

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، قم بتحديد الخيار Required أو إلغاء تحديده، وفقًا لتفضيلاتك.

إنشاء تلميح لمنطقة نص

يمكنك إضافة تلميح إلى منطقة نص (على سبيل المثال "اكتب وصفك هنا")، لجعل مستخدميك يعرفون نوع المعلومات التي يجب عليهم إدخالها في منطقة النص. تعرض منطقة النص نص التلميح عندما يقوم المستخدم بتحميل الصفحة في مستعرض.

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، أدخل تلميحًا في مربع النص Hint.

حظر الحروف الزائدة

يمكنك منع المستخدمين من إدخال حروف تزيد عن أقصى عدد مسموح به في عنصر واجهة مستخدم Validation Text. على سبيل المثال، إذا قمت بتحديد هذا الخيار لعنصر واجهة مستخدم من أجل عدم قبول ما يزيد عن 20 حرفًا، فلن يتمكن المستخدم من كتابة أكثر من 20 حرفًا في منطقة النص.

  1. حدد عنصر واجهة مستخدم Validation Text Area في النافذة Document.
  2. في عارض الخصائص (Window > Properties)، حدد الخيار Block Extra Characters.

تخصيص عنصر واجهة مستخدم Validation Text Area

بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Validation Text Area، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير CSS لعنصر واجهة مستخدم Validation Text Area وإنشاء لوحة قابلة للطي مصممة حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا لمهام التصميم، راجع www.adobe.com/go/learn_dw_sprytextarea_custom_ae.

تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationTextArea.css. يقوم Dreamweaver بحفظ الملف SpryValidationTextArea.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Validation Text Area. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.

ملاحظة:

على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Text Area بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.

تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Text Area

افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Text Area باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.

  1. لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Text Area، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.

    النص المطلوب تغييره

    قاعدة CSS ذات الصلة

    الخصائص ذات الصلة المطلوب تغييرها

    نص رسالة الخطأ

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

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

تغيير ألوان خلفية عنصر واجهة مستخدم Validation Text Area

  1. لتغيير ألوان خلفية عنصر واجهة مستخدم Validation Text Area، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير قيم لون الخلفية الافتراضية:

    لون الخلفية المطلوب تغييره

    قاعدة CSS ذات الصلة

    الخاصية ذات الصلة المطلوب تغييرها

    لون خلفية عنصر واجهة المستخدم في الحالة الصالحة

    		 .textareaValidState textarea, textarea.textareaValidState

    background-color: #B8F5B1;

    لون خلفية عنصر واجهة المستخدم في الحالة غير الصالحة

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

    background-color: #FF9F9F;

    لون خلفية عنصر واجهة المستخدم عند التركيز

    		 .textareaFocusState textarea, textarea.textareaFocusState

    background-color: #FFFFCC;

المزيد مثل هذا

شعار Adobe

تسجيل الدخول إلى حسابك

ارتباطات سريعة

عرض جميع خططك إدارة خططك

إشعارات قانونية    |    سياسة الخصوصية على الإنترنت