Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

إضافة نموذج التحقق من صحة التعليقات إلى وردبرس باستخدام jQuery

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

مثالنا

في مثالنا، سنقوم بإضافة تدقيق للنموذج إلى نموذج تعليق في موضوع ووردبرس الافتراضي. هذه العملية هي نفسها تقريباً لأي نوع من التحقق من صحة النموذج، لذلك يمكنك بسهولة تطبيق هذه التقنية على مثال غير ووردبرس .
الموضوع الذي سنضيفه إلى التحقق هو الموضوع الافتراضي لـ ووردبرس  والذي يأتي مرفقاً بكل تثبيت. لذلك إذا كنت ترغب في المتابعة بالكامل، توجه إلى Wordpress.org وقم بتنزيل وتثبيت نسخة على المخدم الخاص بك.

إذا كنت غير معتاد على نموذج تعليقات ووردبريس، قد ترغب أيضًا في زيارة البرنامج التعليمي NETTUTS - كشف أسرار تعليقات ووردبرس. php




الخطوة 1 - تنزيل jQuery وبرنامج التحقق المساعد  the Bassistance.de

يمكنك تنزيل jQuery من الموقع jQuery.com في الصفحة الأولى سترى مباشرة "تنزيل jQuery وبعض من التنزيلات المختلفة. لن نضيع وقتنا في إطار jQuery ، لذلك يمكنك تنزيل الإصدار" Minified and Gzipped " K ،هذا يعني أنه مضغوط.

بعد ذلك، نحتاج إلى البرنامج الإضافي للتحقق من jQuery، الذي أعده bassistance.de. يتيح لك هذا البرنامج الإضافي التحقق من نماذج الويب، ويمكنك تنزيله من هنا. يحتوي هذا الملف على بعض ملفات Javascript، لكننا نحتاج فقط إلى "jquery.validate.min.js" (مضغوط أيضًا) لهذا البرنامج التعليمي.

الخطوة 2 - تحميل الملفات

الآن يجب أن يكون لديك ملفان، "jquery.validate.min.js" و "jquery-1.2.6.min.js"، سنقوم بتحميل هذا إلى دليل قالب ووردبرس الخاص بنا.

لأننا في هذا البرنامج التعليمي نستخدم موضوع ووردبرس الافتراضي، والذي يسمى حرفيا "افتراضي"، فإن المجلد الذي نحتاجه موجود في / wp-content / themes / default /.

للحفاظ على تنظيم الأمور، سننشئ دليلًا جديدًا باسم "js"، وسيكون هذا هو المجلد الذي يحتوي على جميع javascript. عندما يكون لديك الدليل الذي تم إنشاؤه، قم بتحميل الملفات إلى المجلد الذي أنشأناه للتو. (/المحتوى ووردبرس / المواضيع / الافتراضي / js)

الخطوة 3 - تحميل جافا سكريبت

الآن بعد أن تم تحميل جافا سكريبت في دليلنا، لا يزال يتعين علينا تحميله في موضوعنا. يجب أن يتم تحميل javascript بين العلامات. توجد علامات الرأس في ملف php، الموجود في سواقة الموضوع.

لذا ابحث عن "header.php"، هذا هو الملف الذي يوجد فيه أفضل شيفرات الموضوع. يجب أن نتأكد الآن من إضافة javascript قبل هذين الخطين:

هذه هي الطريقة التي ندمج بها ملف javascript:

بالطبع عندما تقوم بإنشاء موضوع ووردبرس لأحد العملاء، فإنك تريد التأكد من أنه سهل التثبيت. لا تريد أن تقول ، "لا يزال يتعين عليك تغيير عنوان URL إلى javascript!"
نريد أن تحدث الأشياء تلقائيًا، لذا من الأفضل أن نستخدم علامات ووردبرس. لعرض عنوان URL لسواقة القالب، يمكنك استخدام هذا الرمز:

لذلك، وبالاقتران مع الشفرة لتضمين جافا سكريبت، تكون النتيجة النهائية هي:

الآن سيتم تحميل هذه الملفات جافا سكريبت الاثنين في كل صفحة، ويمكن استخدامها على جميع صفحات ووردبرس باستخدام هذا الموضوع!

الخطوة 4 - تفعيل التحقق من الصحة

حسنًا، الآن حان الوقت لتنشيط التحقق من صحة نموذج التعليق، لذا ارجع إلى سواقة الموضوع وابحث عن /wp-content/themes/default/comments.php

الآن، نحن بحاجة فقط إلى إلقاء نظرة على جزء النموذج من التعليمات البرمجية! يبدأ النموذج في السطر 73، ويبدو كالتالي:

الآن كما ترى، يحتوي النموذج على عنصر معرف، يطلق عليه "نموذج التعليق"، نحتاج إلى هذا الاسم لتنشيط javascript.
لا تغلق هذا الملف حتى الآن، قم أولاً بالرجوع إلى "header.php"، وأضف هذه الأسطر تحت jquery.validate.min.js

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

الآن، عندما ترسل تعليقًا حاليًا وتترك جميع الحقول فارغة، فلن يحدث شيئًا، وسيستمر عرض خطأ ووردبرس الافتراضي. في الخطوة التالية، سأوضح لك كيفية بدء التحقق من الصحة لكل حقل.

الخطوة 5 - التحقق من صحة حقل الاسم

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

نريد التأكد من ملء المعلق في الحقل، وإذا أمكن تأكد من إدخال 4 أحرف على الأقل. نعم فعلا! ولكن كيف؟ حسنا هذا بسيط للغاية، يمكنك تحديد التحقق من الصحة عن طريق استدعاء فئة. لذلك ببساطة أضف class = "required"

و WTF أنه يعمل! إذا ضغطت على "إرسال" دون كتابة اسمك، فستحصل على "هذا الحقل مطلوب". لطيف!! إذن ماذا إذا لم يقم المستخدم بإدخال الحد الأدنى من الأحرف؟
يمكننا ببساطة إضافة التحقق من الصحة عن طريق إضافة minlength = "4"" إلى خيارات الحقل:

والآن، عند إدخال شيء (أقل من 4 أحرف) سترى رسالة جديدة تظهر "الرجاء إدخال 4 أحرف على الأقل." بحيث يعمل تماما! Minlength يسمح لك بتعيين الحد الأدنى من الأحرف، فقط استبدال الرقم إلى ما تعتقد أنه ضروري.

الخطوة 6 - التحقق من صحة حقل البريد

بعد ذلك، سيتم التحقق من صحة حقل البريد الإلكتروني، لذا هذه هي الطريقة التي يبدو بها الحقل:

أعلم ما تفكر به، سنفعل نفس الخطوة السابقة. حسنًا قد يكون هذا خطأ، لأنه بالإضافة إلى الحقل المطلوب ببساطة، يجب أن يكون عنوان البريد الإلكتروني صالحًا أيضًا. الآن نحن نعرف كيفية تعيين أن ذلك مطلوب ببساطة عن طريق إضافة class = "required"، ولكن كيف يتم التحقق من صحة البريد الإلكتروني؟ حسنًا من السهل إعداده ليكون مطلوبًا، ماعدا أننا الآن نضيف البريد الإلكتروني فقط.

هه ماذا؟ ما عليك سوى إضافة "بريد إلكتروني"، لذلك  يصبح class = "required email"، وهذا يجعله مطلوبًا ويتحقق من وجود بريد إلكتروني صالح:

إذا جرّبت حقل البريد الإلكتروني، فستلاحظ أنه يشير إلى أن "هذا الحقل مطلوب". عندما قدمته، هذا جيد! والآن عند إدخال شيء غير هذا التنسيق: xx@xx.xx سيقول "الرجاء إدخال عنوان بريد إلكتروني صالح." لذلك هذا العمل مثالي! انظر كم هو سهل!

الخطوة 7 - التحقق من صحة موقع الويب

هل سنقوم بتفعيل حقل الموقع؟ هل حقاً ليس مطلوباً ؟ نعم كلامك صحيح! لكننا نريد عنوان URL صالحًا! لذلك سنقوم بالتحقق من صحة عنوان URL ، فهو بنفس سهولة عمليات التحقق السابقة، لكن دعنا نلقي نظرة أولاً على حقل عنوان URL:

الآن يمكنك ضبطه كمطلوب وتعيين حد أدنى من الأحرف، لكنني لا أعتقد أن هذا ضروري لهذا الحقل.
أريد فقط عنوان URL صالحًا، فكيف إذن؟ نضيف فئة أخرى فقط ولكن هذه المرة نسميها class = "url"، لذا دعنا نضيف ما يلي:

وماذا تعرف! أدخِل "blabla" في حقل موقع الويب، ويعرض "الرجاء إدخال عنوان URL صالح" مباشرةً. وعندما أتركه فارغًا، لا يقول إنه مطلوب عند إرساله.
لذلك هذا العمل مثالي، تماما كما أردت! كما ترون أنه من السهل جدا بفضل jQuery والبرنامج المساعد للتحقق.

الخطوة 8 - التحقق من صحة حقل التعليق

هذا هو الحقل الأخير للتحقق، والآن لا أحب الرسائل القصيرة غير المرغوب فيها مثل "انقرني" وهذا النوع من التعليقات، ولكنني أكره أيضًا الرسائل الطويلة، التي تستغرق ساعات للقراءة، أو هي مليئة بالرسائل غير المرغوب فيها. لذلك أود الحصول على الحد الأدنى والحد الأقصى من الأحرف. لكن دعنا أولا نتحقق من حقل التعليق:

حسنا، أنت تعرف الخطوة ، قم بإضافة الفئة المطلوبة (class = "required") للتأكد من كتابة شيء ما في منطقة النص. الآن الحد الأدنى، أتذكر حقاً؟ (minlength = "") الآن أعتقد أنه يجب كتابة 10 كلمات على الأقل. إذاً سيكون هذا هو minlength ="10"، لا يزال الأمر بهذه السهولة. ولكن الآن نريد تحديد الحد الأقصى، كيف ذلك؟ حسنا البرنامج المساعد لديه حل لذلك، بدلا من minlength فقط قم بإضافة maxlength بالإضافة إلى كمية الكلمات. أعتقد أن 100 كلمة كافية لذا أضف maxlength = "100"".

سهل! نعم اعرف! إذن هذه هي الطريقة التي ستبدو بها:

إذاً الآن، عندما تقوم بإرسال النموذج فارغًا ، فسيتم اخبارك كـ جميع الحقول الأخرى "هذا الحقل مطلوبًا."، ولكن إذا قمت بإدخال أقل من 10 أحرف، فسيقول "الرجاء إدخال 10 أحرف على الأقل." وإذا أدخلت أكثر من 100، فسيظهر لك "الرجاء إدخال 10 أحرف على الأقل"! لذلك أكملنا التحقق !! لذلك أكملنا التحقق !! ولكن هذا ليس كل شيء، لا نزال بحاجة إلى تصميمه!

الخطوة 9 - تصميم النموذج

لا أعرف كيف ترى النموذج، لكني لا أحب الطريقة التي يبدو بها الشكل. فوضوي والأخطاء تنبثق فقط مع عدم وجود نمط. لذلك نحن ذاهبون لتصميم أسلوب لكل شيء بحيث يبدو لطيفاً وبسيطاً، ولكن أولا أود تغيير موضع التسمية. كما ترون الآن، فإنه يظهر أولاً "حقل الإدخال" ثم "خطأ" ثم "تسمية الحقل".

أعتقد أنه يجب أن تبدو هذه "تسمية الحقل"، "حقل الإدخال" ثم "الخطأ"، للقيام بذلك، علينا فقط نقل التسمية فوق html. لذا دعنا نغير الحقل الأول من:

إلى

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

الآن كما ترى، تحتوي جميع الحقول على تسميات، باستثناء حقل التعليقات، أعتقد أنه يجب أن يكون له تسمية. فقط افعل نفس الشيء، وضع تسمية فوق حقل الإدخال:

هذا لا يبدو أنه يفعل ذلك بشكل أفضل بكثير؟ حسنا هذا لأننا ما زلنا بحاجة إلى تصميمه! حان الآن وقت فتح ملف CSS للموضوع. يمكن العثورعلى ملف CSS لهذا الموضوع في "/wp-content/themes/default/style.css"، فقط افتح هذا الملف وانتقل إلى الأسفل.

حسنًا نحن مستعدون لبدء التصميم، ولكننا نريد التأكد من تأثر النموذج فقط بهذا CSS. بفضل معرف النموذج ، يمكننا التأكد من حدوث ذلك. لذا أمام كل من خطوط CSS التي نضيفها، سنحرص على كتابة #commentform .classname، وهذا ما يضمن أن تتأثر الحقول بين فقط.

سنبدأ أولاً في علامة التسمية، لذا أضف هذا إلى CSS:

يمكننا الآن تطبيق CSS على التسمية، عن طريق كتابة الخيارات بين {و}. لذا دعونا أولاً نعيّن عرضًا، هذا هو مقدار المساحة التي ستحصل عليها، يجب أن يكون حجم 200 بكسل جيدًا. لا يزال بإمكانك قراءة جميع الأسطر وعدم قطع النص.

الآن كما ترون، لا يحدث شيء. هذا لأننا ما زلنا بحاجة إلى التأكد من بقاء التسميات على حالها. يمكننا استخدام منصة عائمة من اجل هذا:

الآن هذا يبدو أكثر لطفاً! الآن دعونا نصمم حقول الإدخال ومنطقة النص.
لتطبيق CSS على هذه الحقول، يمكننا الاتصال بها باستخدام "input" و "textarea". لذلك دعونا نضيف ذلك بالإضافة إلى حدود صغيرة:

الآن أريد أن تكون جميع الحقول بنفس الطول، بالإضافة إلى textarea. لذلك سنقوم بتطبيق عرض ثابت، على النحو التالي:

الخطوة 10 – تصميم رسائل الخطأ

الآن عند النقر على "إرسال" سترى رسائل الخطأ لا تبدو لطيفة جدًا. وأعتقد أنها بحاجة إلى أن تكون تحت حقول الإدخال. عندما يقوم برنامج التحقق من الصحة بإخراج خطأ، سيبدو HTML كما يلي:

يخبرنا هذا أن الأخطاء التي تم إنشاؤها تدخل فئة "خطأ"، لذلك دعونا نقوم بتجربتها ونقل الخطأ أسفل حقول الإدخال.
تذكر أن التسمياتات تساوي 200 بكسل، لذا فأنت تعلم أنه يجب أن يكون  لدينا الهامش اليساري يساوي هذا العدد من البيكسلات:

ولكن هذا سهل نوعًا ما، لذا دعنا نضيف لون خلفية وحدود:

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

يمكنك أن ترى أني قمت بتعديل العرض، يجب عليك دائمًا تعديل بعض الأشياء بحيث يظهر كل شيء:

هذا بالفعل يبدو رائعًا، لكن هناك شيء مفقود! أنا أعرف صورة خطأ! دعونا نجرب أيقونة famfamfam.

حسنا هذا ليس تماماً ما نريد، على ما أعتقد! يتعين علينا نقل النص إلى اليمين، يمكننا القيام بذلك باستخدام الحاشية اليسرى:

تذكر دائمًا أن استخدام المساحة المتروكة يزيد الحجم الثابت، لذلك قمنا بتطبيق حاشية يسرى 20 وحدة بكسل، مما يعني أنه علينا طرح 20 بكسل من العرض. ولهذا السبب قمت بتغيير العرض إلى 209 (229-20)

وهذا كل شيء! البرنامج المساعد للتحقق من jQuery سهل الاستخدام والتطبيق للغاية ويمكنك استخدام هذه التقنية على أي شكل، وليس فقط نماذج التعليقات وورد.




Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.