حدد Insert > Spry > Spry Validation Confirm.
تاريخ آخر تحديث
6 مايو 2021
ملاحظة:
تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.
معلومات عن عنصر واجهة مستخدم Validation Confirm
يعتبر عنصر واجهة مستخدم Validation Confirm حقل نص أو حقل نموذج كلمة مرور يعرض الحالات الصالحة وغير الصالحة عندما يقوم المستخدم بإدخال قيمة لا تناسب القيمة الموجودة بحقل مشابه في نفس النموذج. على سبيل المثال، يمكنك إضافة عنصر واجهة مستخدم Validation Confirm لنموذج يتطلب قيام المستخدم بإعادة كتابة كلمة المرور الذي حددها في حقل سابق. إذا فشل المستخدم في كتابة كلمة المرور المطابقة تمامًا لتلك التي حددها سابقًا، يُرجع عنصر واجهة المستخدم رسالة خطأ تنص على عدم تطابق القيمتان.
يمكنك استخدام عنصر واجهة مستخدم Validation Confirm مع عنصر واجهة مستخدم Validation Text Field للتحقق من عناوين البريد الإلكتروني.
ملاحظة:
يجب أن تكون متمرسًا في التعامل مع عناصر واجهة مستخدم Spry validation قبل العمل مع عنصر واجهة مستخدم Confirm. إذا كنت غير معتاد على التعامل معها، فراجع العمل مع عنصر واجهة المستخدم Spry Validation Text Field، أو أي نظرات عامة أخرى على عنصر واجهة مستخدم التحقق قبل المتابعة. لا تقدم هذه النظرة العامة كل مفاهيم عناصر واجهة المستخدم الأساسية.
يعرض الشكل التوضيحي التالي عملية إعداد نموذجية لعنصر واجهة مستخدم Confirm:
A. عنصر واجهة مستخدم Spry Password Validation أو حقل كلمة مرور B. عنصر واجهة مستخدم Confirm
يتضمن عنصر واجهة مستخدم Validation Confirm عددًا من الحالات (على سبيل المثال، صالحة وغير صالحة، وقيمة مطلوبة، وما إلى ذلك). يمكنك تبديل خصائص هذه الحالات عن طريق تحرير ملف CSS المقابل (SpryValidationConfirm.css)، استنادًا إلى نتائج التحقق المطلوبة. يمكن لعنصر واجهة مستخدم Validation Confirm إجراء التحقق في مراحل متنوعة— على سبيل المثال، عندما ينقر زائر الموقع خارج عنصر واجهة المستخدم، أو عندما يكتب، أو عندما يحاول تقديم النموذج.
الحالة Initial
عند تحميل الصفحة في المستعرض، أو عندما يقوم المستخدم بإعادة تعيين النموذج.
الحالة Focus
عندما يضع المستخدم نقطة الإدراج في عنصر واجهة المستخدم.
الحالة Valid
عندما يُدخل المستخدم المعلومات بشكل صحيح، ويمكن تقديم النموذج.
الحالة Invalid
عندما يُدخل المستخدم نصًا لا يتطابق مع النص المُدخل في حقل نص سابق، عنصر واجهة مستخدم Validation Text Field أو عنصر واجهة مستخدم Validation Password.
الحالة Required
عندما لا يُدخل المستخدم النص المطلوب في حقل النص.
للاطلاع على شرح أشمل حول كيفية عمل عنصر واجهة مستخدم Confirm، وكذلك معلومات إضافية عن بنية عنصر واجهة المستخدم، راجع www.adobe.com/go/learn_dw_spryconfirm_ae.
إدراج عنصر واجهة مستخدم Validation Confirm وتحريره
إدراج عنصر واجهة مستخدم Validation Confirm
-
-
أكمل مربع الحوار Input Tag Accessibility Attributes، ثم انقر فوق OK.
ملاحظة:
يمكنك أيضًا إدخال عنصر واجهة مستخدم Validation Confirm باستخدام الفئة Spry في اللوحة Insert.
تغيير الحالة المطلوبة لعنصر واجهة مستخدم Validation Confirm
افتراضيًا، تتطلب كل عناصر واجهة مستخدم Validation Confirm التي تقوم بإدراجها مع Dreamweaver إدخالًا من المستخدم عند نشرها على صفحة ويب. ومع ذلك، يمكنك جعل إكمال حقول نص التأكيد اختياريًا للمستخدم.
-
حدد عنصر واجهة مستخدم Validation Confirm في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، قم بتحديد الخيار Required أو إلغاء تحديده، وفقًا لتفضيلاتك.
حدد حقل النص المطلوب إجراء التحقق بناءً عليه
-
حدد عنصر واجهة مستخدم Validation Confirm في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد حقل النص الذي تريد إجراء التحقق بناءً عليه عن طريق تحديد حقل نص من القائمة المنبثقة Validate Against. تظهر كل حقول النص بمعرفات ID المخصص لها على هيئة خيارات في القائمة المنبثقة.
عرض حالات عنصر واجهة المستخدم في طريقة العرض Design
-
حدد عنصر واجهة مستخدم Validation Confirm في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الحالة التي تريد رؤيتها من القائمة المنبثقة Preview States. على سبيل المثال، إذا كنت تريد رؤية عنصر واجهة المستخدم في حالته الصالحة، فحدد Valid.
تحديد عن حدوث التحقق
يمكنك تعيين المرحلة التي عندها يحدث التحقق- عندما ينقر زائر الموقع خارج عنصر واجهة المستخدم، بينما يكتب الزائر، أو عندما يحاول الزائر تقديم النموذج.
-
حدد عنصر واجهة مستخدم Validation Confirm في النافذة Document عن طريق النقر فوق علامة التبويب الزرقاء الخاصة بها.
-
في عارض الخصائص (Window > Properties)، حدد الخيار الذي يوضح الوقت الذي تريد حدوث التحقق فيه. يمكنك تحديد كل الخيارات أو النقر فوق Submit فقط.
Blur
التحقق في أي وقت يقوم فيه المستخدم بالنقر خارج نص حقل التأكيد.
Change
التحقق بينما يقوم المستخدم بتغيير النص داخل حقل نص التأكيد.
Submit
التحقق عندما يحاول المستخدم تقديم النموذج. يتم تحديد خيار التقديم افتراضيًا، ولا يمكن إلغاء تحديده.
تخصيص عنصر واجهة مستخدم Confirm
بالرغم من أن عارض الخصائص يتيح لك إمكانية إجراء عمليات تحرير بسيطة على عنصر واجهة مستخدم Validation Confirm، إلا أنه لا يدعم مهام التصميم المخصصة. يمكنك تغيير CSS لعنصر واجهة مستخدم Validation Confirm وإنشاء لوحة قابلة للطي مصممة حسب رغبتك. للاطلاع على قائمة أكثر تقدمًا، راجع www.adobe.com/go/learn_dw_spryconfirm_custom_ae.
تشير كل قواعد CSS في الموضوعات الواردة أدناه إلى القواعد الافتراضية الموجودة في الملف SpryValidationConfirm.css. يقوم Dreamweaver بحفظ الملف SpryValidationConfirm.css في المجلد SpryAssets الخاص بموقعك عند إنشاء عنصر واجهة مستخدم Spry Validation Confirm. ويعد الرجوع إلى هذا الملف أمرًا مفيدًا نظرًا لاحتوائه على معلومات معلق عليها عن الأنماط المتنوعة التي تنطبق على عنصر واجهة المستخدم.
ملاحظة:
على الرغم من أنه بإمكانك تحرير قواعد عنصر واجهة مستخدم Validation Confirm بسهولة مباشرةً في الملف CSS المصاحب، إلا أنه يمكنك أيضًا استخدام اللوحة CSS Styles لتحرير CSS لعنصر واجهة المستخدم. تعتبر اللوحة CSS Styles مفيدة لتحديد موقع فئات CSS المخصصة لأجزاء مختلفة من عنصر واجهة المستخدم، خصوصًا إذا كنت تستخدم الوضع Current الخاص باللوحة.
تصميم عنصر واجهة مستخدم Validation Confirm (إرشادات عامة)
-
افتح الملف SpryValidationConfirm.css.
-
حدد موقع قاعدة CSS لجزء عنصر واجهة المستخدم المطلوب تغييره. على سبيل المثال، لتغيير لون خلفية حالة عنصر واجهة مستخدم Confirm المطلوبة، قم بتحرير القاعدة input.confirmRequiredState في الملف SpryValidationConfirm.css.
-
قم بإجراء التغييرات التي تريدها على CSS، ثم احفظ الملف.
يتضمن الملف SpryValidationConfirm.css تعليقات ممتدة، تشرح التعليمة البرمجية والغرض من قواعد معينة. لمزيد من المعلومات، راجع التعليقات الموجودة في الملف.
تصميم نص رسالة خطأ عنصر واجهة المستخدم Validation Confirm
افتراضيًا، تظهر رسائل الخطأ الخاصة بعنصر واجهة مستخدم Validation Confirm باللون الأحمر بحد متصل قدره 1 بكسل يحيط بالنص.
-
لتغيير تصميم نص رسائل خطأ عنصر واجهة مستخدم Validation Confirm، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير الخصائص الافتراضية، أو إضافة قيم وخصائص تصميم نص من اختيارك.
النص المطلوب تغييره
قاعدة CSS ذات الصلة
الخصائص ذات الصلة المطلوب تغييرها
نص رسالة الخطأ
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
تغيير ألوان خلفية عنصر واجهة مستخدم Validation Confirm
-
لتغيير ألوان خلفية عنصر واجهة مستخدم Validation Confirm، استخدم الجدول التالي لتحديد موقع قاعدة CSS المناسبة، ثم قم بتغيير قيم لون الخلفية الافتراضية.
اللون المطلوب تغييره
قاعدة CSS ذات الصلة
الخاصية ذات الصلة المطلوب تغييرها
لون خلفية عنصر واجهة المستخدم في الحالة الصالحة
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
لون خلفية عنصر واجهة المستخدم في الحالة غير الصالحة
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
لون خلفية عنصر واجهة المستخدم عند التركيز
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
