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

عندما يتعلق الأمر بتجربة مستخدم أبسط، فإن التحقق من صحة النموذج الخاص بك على الفور في نفس الصفحة يكون أكثر بساطة من إعادة تحميل الصفحات وربما فقدان بعض محتويات النموذج. في هذا البرنامج التعليمي، سأوضح لك كيفية استخدام 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 قبل هذين الخطين:

<?php wp_head(); ?>
</head>

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

<script src="url/to/javascript" type="text/javascript"></script>

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

<?php bloginfo('stylesheet_directory'); ?>

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

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js"" type="text/javascript"></script>

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

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

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

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

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

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

<script type="text/javascript">
$().ready(function() {
// validate the comment form when it is submitted
$("#commentform").validate();
});
</script>

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

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

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

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

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

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

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

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

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" minlength="4" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

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

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

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

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

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

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

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" class="required email" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

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

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

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

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

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

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" class="url" />
<label for="url"><small>Website</small></label></p>

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

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

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

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

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

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

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" class="required" minlength="10" maxlength="100"  ></textarea></p>

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

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

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

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

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" class="required" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

إلى

<p><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></p>

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

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

<label for="comment"><small>Comment</small></label></p>
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

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

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

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

#commentform label{
}

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

#commentform label{
width: 200px;
}

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

#commentform label{
width: 200px;
float:left;
}

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

#commentform input, #commentform textarea{
border: 1px solid #dbd8d3;
}

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

#commentform input, #commentform textarea{
border: 1px solid #dbd8d3;
width: 225px;
}

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

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

<label class="error" generated="true" for="author">This field is required.</label>

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

#commentform label.error{
margin-left: 200px;
}

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

#commentform label.error{
margin-left: 200px;
background: #fbfcda;
border:1px solid #dbdbd3;
}

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

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda;
border:1px solid #dbdbd3;
width:229px;
margin-top:4px;
}

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

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

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda url('images/cancel.png') no-repeat left;
border:1px solid #dbdbd3;
width:229px;
margin-top:4px;
}

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

#commentform label.error{
font-size: 11px;
margin-left: 200px;
background: #fbfcda url('images/cancel.png') no-repeat left;
border:1px solid #dbdbd3;
width:209px;
margin-top:4px;
padding-left:20px;
}

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

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