jQuery का प्रयोग करके WordPress में Form Validation को जोड़ना

जब यह आसान यूजर अनुभव की बात आती है, तो उसी पेज पर तुरन्त आपका फॉर्म वेलिडेशन हो जाता है, पेजेज को पुनः लोड करने से काफी क्लीनर होता है और संभवतः कुछ फॉर्म कंटेंट खो देता है। इस ट्यूटोरियल में मैं आपको दिखाता हूं कि एक उदाहरण कमेंट फॉर्म पर कुछ क्विक जांच करने के लिए jQuery का उपयोग कैसे करें।

हमारे उदाहरण

हमारे उदाहरण के लिए हम डीफॉल्ट WordPress थीम में एक कमेंट फ़ॉर्म में फॉर्म वेलिडेशन जोड़ना चाहते हैं। प्रोसेस किसी भी प्रकार की वेलिडेशन के लिए बहुत ही समान है, लेकिन आप इस तकनीक को आसानी से गैर-वर्डप्रेस उदाहरण के लिए लागू कर सकते हैं।
वो थीम जो हम वेलिडेशन के लिए जोड़ेंगे वो WordPress की डिफ़ॉल्ट थीम है जो प्रत्येक इंस्टॉल के साथ आती है। इसलिए यदि आप पूरी तरह से फॉलो करना चाहते हैं, तो Wordpress.org पर जाएं और अपने सर्वर पर एक कॉपी डाउनलोड करें और इंस्टॉल करें।

यदि आप वर्डप्रेस के 'कमैंट्स फॉर्म से अपरिचित हैं, तो आप NETTUTS ट्यूटोरियल पर भी जा सकते हैं - Unravelling the Secrets of WordPress Comments.php

स्टेप 1 - jQuery और Bassistance.de वेलिडेशन प्लगइन को डाउनलोड करें

आप jQuery.com के वेबसाइट पर jQuery डाउनलोड कर सकते हैं। पहले पेज पर आप सीधे "jQuery डाउनलोड करें और कुछ अलग डाउनलोड देखेंगे। हम jQuery के ढांचे के साथ घूमने के लिए नहीं जा रहे हैं, ताकि आप "Minified और GZipped" वर्जन को डाउनलोड कर सकें, इसका मतलब है कि यह कंप्रेस्ड है।

इसके बाद हमे bassistance.de द्वारा बनाई गई jQuery वेलिडेशन प्लगइन की आवश्यकता है। यह प्लगइन आपको वेब फ़ॉर्म को वैलिडेट करने की अनुमति देता है, आप इसे यहां से डाउनलोड कर सकते हैं। इस फाइल में कुछ जावास्क्रिप्ट फाइलें हैं, लेकिन हमें इस ट्यूटोरियल के लिए केवल "jquery.validate.min.js" (कंप्रेस्ड भी) की आवश्यकता है।

स्टेप 2 - फाइल अपलोड करना

अब आपके पास 2 फाइलें, "jquery.validate.min.js" और "jquery-1.2.6.min.js" होनी चाहिए, हम इसे हमारे वर्डप्रेस टेम्पलेट डायरेक्टरी में अपलोड करने जा रहे हैं।

क्योंकि इस ट्यूटोरियल में हम डिफ़ॉल्ट वर्डप्रेस थीम का प्रयोग कर रहे हैं, जिसको शाब्दिक रूप से "default" कहा जाता है, जिस फ़ोल्डर की हमे आवश्यकता है /wp-content/themes/default/ में स्थित है।

चीजों को व्यवस्थित रखने के लिए हम "js" नामक एक नई डायरेक्टरी बनाएंगे, यह सभी जावास्क्रिप्ट के लिए फ़ोल्डर होगा। जब आपके पास डायरेक्टरी बनाई गई है, तो उस फ़ोल्डर में फ़ाइलें अपलोड करें जिसे हमने अभी बनाया है। (/wp-content/themes/default/js)

स्टेप 3 - जावास्क्रिप्ट लोड करना

अब जब हमारे पास हमारी डायरेक्टरी में अपलोड की गई जावास्क्रिप्ट है, तो हमें इसे अपनी थीम में लोड करना होगा। जावास्क्रिप्ट को टैग के बीच लोड करना चाहिए। head टैग एक php फ़ाइल में स्थित हैं, जो थीम डायरेक्टरी में स्थित है।

तो "header.php" की खोज करें, यह वह फ़ाइल है जहां थीम कोड का शीर्ष स्थित है। अब हमें यह सुनिश्चित करना होगा कि हम इन 2 लाइनों से पहले जावास्क्रिप्ट को जोड़ते हैं:

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

इस तरह हम एक जावास्क्रिप्ट फाइल शामिल करते है:

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

बेशक, जब आप क्लाइंट के लिए वर्डप्रेस थीम बना रहे हैं, तो आप यह सुनिश्चित करना चाहते हैं कि इसका इंस्टॉलेशन करना आसान हो। आप यह नहीं कहना चाहते, "आपको जावास्क्रिप्ट के URL को बदलना है!"
हम चीजों को आटोमेटिक रूप से करना चाहते हैं, इसलिए यदि हम WordPress टैग का उपयोग करते हैं तो यह सबसे अच्छा है। 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>

अब ये 2 जावास्क्रिप्ट फ़ाइलों को हर पेज पर लोड किया जाएगा, और इस थीम का उपयोग करके सभी वर्डप्रेस पेजेज पर इस्तेमाल किया जा सकता है!

स्टेप 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>

अब जैसा कि आप देख सकते हैं, फ़ॉर्म में एक ID एलिमेंट है, इसे "commentform" कहा जाता है, हमें जावास्क्रिप्ट को एक्टिवेट करने के लिए इस नाम की आवश्यकता है।
अभी तक इस फाइल को बंद न करें, पहले "header.php" पर वापस जाएँ, और jquery.validate.min.js के नीचे इन पंक्तियों को जोड़ें

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

जैसा कि आप देख सकते हैं, फॉर्म का ID वहां है, "#commentform" यह id commentform के साथ किसी भी फॉर्म के वेलिडेशन को सक्रिय करता है।
तो देखें कि आप डुप्लिकेट ID का उपयोग नहीं कर रहे हो या फिर कुछ फॉर्म्स को वैलिडेट किया जाएगा, जब उन्हें संभवतः आवश्यकता नहीं होगी।

अब, जब आप वर्तमान में एक कमेंट सबमिट करते हैं और आप सभी फ़ील्ड को छोड़ देते हैं, तो यह कुछ नहीं करता, यह अभी भी डिफ़ॉल्ट वर्डप्रेस एरर को दिखाता है। अगले स्टेप में मैं आपको दिखाऊंगा कि प्रत्येक फ़ील्ड के लिए वेलिडेशन कैसे शुरू किया जाए।

स्टेप 5 - Name फ़ील्ड की वेलिडेशन

अब प्रत्येक फ़ील्ड के लिए वेलिडेशन शुरू करने का समय है। इसका अर्थ है वेलिडेशन जावास्क्रिप्ट फ़ाइल को बताए जाने के माध्यम से जा रहा है कि किस प्रकार की वेलिडेशन की आवश्यक है। वेलिडेशन जावास्क्रिप्ट का उपयोग करना इतना आसान है, आपको वेलिडेशन शुरू करने के लिए केवल कुछ विशेष शब्द दर्ज करने की आवश्यकता है। तो चलो पहली फ़ील्ड से शुरू करते हैं, यह रिक्वायर्ड name फ़ील्ड है, फ़ील्ड इस प्रकार दिखती है:

<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 यह काम करता है! यदि आप अपने नाम को टाइप किए बिना सबमिट करते हैं तो आपको "This field is required." मिलेगा। बढ़िया!! तो क्या होगा यदि यूजर न्यूनतम करैक्टर की संख्या दर्ज नहीं करता है?
अच्छी तरह से हम फ़ील्ड ऑप्शंस में 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 अक्षर से कम) दर्ज करते हैं तो आपको एक नया मैसेज दिखाई देगा "Please enter at least 4 characters"। तो यह पूरी तरह से काम करता है! Minlength आपको कम से कम करैक्टर को सेट करने की अनुमति देता है, केवल आपको जो आवश्यक लगता है उस नंबर से बदल दें।

स्टेप 6 - Mail फ़ील्ड का वेलिडेशन

इसके बाद हम ईमेल फ़ील्ड को वैलिडेट करेंगे, तो यह फ़ील्ड ऐसा दिखता है:

<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" को जोड़ना रिक्वायर्ड कैसे सेट करें, लेकिन ईमेल को कैसे वैलिडेट किया जाए? वेल यह उतना ही आसान है जितना की इसमें रिक्वायर्ड सेट करना था, बस इसके अलावा की अब हमे ईमेल को जोड़ना है।

हैं क्या? बस "email" जोड़ें, तो यह 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>

यदि आप ईमेल फ़ील्ड को आज़माते हैं, तो आप देखेंगे कि जब इसे सबमिट करते हैं तो यह कहता है "This field is required", यह अच्छा है! और अब जब आप कुछ दर्ज करते हैं जो यह फॉर्मेट में नहीं है: xx@xx.xx यह कहेंगे "Please enter a valid email address." तो यह सही काम कर रहा है! देखें, यह कितना आसान है!

स्टेप 7 - Website फ़ील्ड का वेलिडेशन करना

क्या हम वेबसाइट फील्ड को वैलिडेट करने जा रहे हैं? यह सही नहीं है? हाँ आप सही है! लेकिन हम एक वैलिड 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" दर्ज करता हूं और यह सीधे "Please enter a valid URL" रीटर्न करता है, और जब मैं इसे खाली रहने देता हूँ और सबमिट करता हूँ तो यह नहीं कहता।
तो यह सही काम कर रहा है, जैसे मैं चाहता था! जैसा कि आप देख सकते हैं यह बहुत ही आसान है jQuery और Validation प्लगइन के लिए धन्यवाद।

स्टेप 8 - Comment फ़ील्ड को वैलिडेट करना

वैलिडेट करने के लिए यह अंतिम फील्ड है, अब मुझे "click me" और इस तरह के कमैंट्स जैसे शॉर्ट स्पैम मेसेजस पसंद नहीं है, लेकिन मैं लंबे मेसेजस से भी नफरत करता हूं, जो पढ़ने में बहुत समय लगाते है या सिर्फ स्पैम से भरे होते है। इसलिए मुझे कम से कम और अधिक से अधिक करैक्टर को चुनना होगा। लेकिन पहले हम कमेंट फील्ड की जांच करते हैं:

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

ठीक है कि आप स्टेप 1 जानते हैं, textarea में कुछ टाइप किया गया है यह सुनिश्चित करने के लिए required क्लास (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>

तो अब, जब आप फॉर्म को खाली करेंगे तो अन्य सभी फ़ील्ड के रूप में "This field is required" कहेगा। लेकिन अगर आप 10 अक्षर से कम दर्ज करते हैं तो "Please enter at least 10 characters." कहेगा और यदि आप 100 से अधिक दर्ज करते हैं तो यह कहेगा, "Please enter at least 10 characters."! तो हमने वेलिडेशन पूरा कर लिया!! लेकिन यह सब कुछ नहीं है, हमें अभी भी स्टाइल की ज़रूरत है!

स्टेप 9 - फॉर्म को स्टाइल करना

मैं आपके बारे में नहीं जानता, लेकिन मुझे फॉर्म दिखने का तरीका पसंद नहीं है। यह गन्दा और एरर के साथ बिना स्टाइल के पॉपअप होता है। इसलिए हम हर किसी को स्टाइल करने जा रहे हैं, तो यह अच्छा और साफ दिखता है, लेकिन पहले मैं लेबल की स्थिति को बदलना चाहता हूं। जैसा कि आप अभी देख सकते हैं, यह पहले "input field" इसके बाद "error" और फिर "field label" दिखाता है।

मुझे लगता है कि यह "field label", "input field" और फिर "error" दिखना चाहिए, ऐसा करने के लिए हमें केवल 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> को <input> के ऊपर ले गए। जब आप अब अपने कमेंट पेज को रीफ्रेश करते हैं तो आप देखेंगे कि "Name (required)" इनपुट फ़ील्ड के फ्रंट में होता है।
तो अब सभी इनपुट फ़ील्ड के लिए यह स्टेप को दोहराएं, अंत में इसे इस तरह दिखना चाहिए:

अब जैसा कि आप देख सकते हैं, कमेंट फ़ील्ड को छोड़कर सभी फ़ील्ड के लेबल्स हैं, मुझे लगता है कि इसमें लेबल होना चाहिए तो बस ऐसा करें, और इनपुट फ़ील्ड के ऊपर एक लेबल रखें:

<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 से प्रभावित हो। फ़ॉर्म ID के लिए धन्यवाद, हम यह सुनिश्चित कर सकते हैं कि ऐसा हो। इसलिए प्रत्येक CSS लाइनों के सामने हम जोड़ते हैं, हम सुनिश्चित करेंगे कि #commentform .classname टाइप करें, इससे यह सुनिश्चित होता है कि केवल <form></form> के बीच फ़ील्ड प्रभावित हो।

हम पहले लेबल टैग पर शुरू करने जा रहे हैं, इसलिए इसे CSS में जोड़ें:

#commentform label{
}

अब हम लेबल को CSS को {और} के बीच ऑप्शंस को टाइप करके लागू कर सकते हैं। तो पहले, चौड़ाई निर्धारित करें, यह कितना स्थान मिलेगा, 200px के आसपास अच्छा होना चाहिए। आप अभी भी सभी लाइन्स पढ़ सकते हैं और कोई टेक्स्ट कट-ऑफ़ नहीं है।

#commentform label{
width: 200px;
}

अब जैसा कि आप देख सकते हैं, कुछ नहीं हुआ इसका कारण यह है कि हमें अभी भी यह सुनिश्चित करने की आवश्यकता है कि लेबल लेफ्ट में रहें। हम इसके लिए float का उपयोग कर सकते हैं:

#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 - Error का स्टाइल करना

अब जब आप सबमिट को दबाएंगे, तो आपको error मैसेज दिखाई नहीं देंगे। और मुझे लगता है कि उन्हें इनपुट फ़ील्ड के ठीक नीचे रहने की आवश्यकता है। जब वेलिडेशन स्क्रिप्ट में एरर आता है, तो HTML में इस तरह दिखाई देगा:

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

यह हमें बताता है, उत्पन्न एरर को क्लास "error" मिलती है, तो आइए इसे आज़माएं और इनपुट फ़ील्ड के नीचे एरर को स्थानांतरित करें।
याद रखें कि लेबल 200px चौड़ाई का हैं, इसलिए आपको पता है कि उस पिक्सेल की मात्रा के लिए मार्जिन-बाएं होगा:

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

लेकिन यह थोड़ा सा सादा है, तो हम एक बैकग्राउंड रंग और एक बॉर्डर जोड़ें:

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

यहां कुछ चीजें जो इसे खराब दिखती हैं, फ़ॉन्ट साइज, कोई पैडिंग (टेक्स्ट और ग्रे बॉर्डर के बीच की जगह) और मार्जिन (एरर और फील्ड के बीच की जगह) नहीं है। प्लस यह बहुत अच्छा लगेगा अगर एरर width इनपुट फ़ील्ड के समान है, इसलिए हम कोशिश करते हैं कि:

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

आप देख सकते हैं कि मैंने विड्थ एडजस्ट की है, आपको हमेशा चीजों को थोड़ी मात्रा में बदलना पड़ता है ताकि सब कुछ सही हों:

वह पहले से ही बहुत अच्छा लग रहा है, लेकिन कुछ गायब है! मुझे एक एरर इमेज पता है! चलो एक famfamfam icon को try करें।

#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;
}

अच्छा, यह वास्तव में नहीं है, मुझे लगता है! हमें टेक्स्ट को दाहिनी ओर ले जाना है, हम यहाँ padding-left का उपयोग कर सकते हैं:

#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 पिक्सल पैडिंग लगाई, जिसका अर्थ है कि हमें width से 20 पिक्सल घटाना होगा। इसलिए मैंने width को बदलकर 209 (229 -20) कर दिया।

और बस! JQuery का वेलिडेशन प्लगइन अत्यंत उपयोग करने और लागू करने के लिए बेहद आसान है और आप किसी भी रूप में इस तकनीक का उपयोग न सिर्फ वर्डप्रेस कमैंट्स के फॉर्म्स में कर सकते हैं बल्कि कहीं भी कर सकते हैं।