{"authorId":"1","title":"Use jQuery to Enhance your WordPress Comment Form","slug":"use-jquery-to-enhance-your-wordpress-comment-form","postDate":1231807649,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I have already completed a couple of tutorials on forms and jQuery (<a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/ajax-forms-with-jquery\/\">Ajax Forms with jQuery<\/a> and <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/flexible-and-semantic-forms-with-a-little-jquery\/\">Flexible and Semantic Forms with a Little jQuery<\/a>), but I wanted to show another example of using a simple jQuery script to enhance functionality. This example will be about the comment form on a WordPress powered site.<\/p>\n<!--more-->\n<p><img src=\"http:\/\/trevordavis.net\/images\/content\/2009\/01\/wordpress-validation.gif\" alt=\"WordPress Validation Screenshot\" width=\"330\" height=\"106\" class=\"leftSide pullLeft col6 frame\" \/>Depending upon your configuration, WordPress will validate the comment form for required fields. In my configuration, I want to make sure that users fill in their name and email address If you submit my comment form without those, WordPress will perform server side validation.<\/p>\n\n<p>But, do you really want users to see this error page? <strong>Wouldn&rsquo;t it be so much better if we used to JavaScript to validate on the client side so that they never have to leave the form<\/strong>?<\/p>\n\n<p>I think so. Before we get started, I created <a href=\"http:\/\/trevordavis.net\/play\/wordpress-comment-form\/\">a sample of the WordPress comment form<\/a>.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/wordpress-comment-form\/\" class=\"more-link\">See Example Page<\/a><\/p>\n\n<h2>Creating the Markup<\/h2>\n<p>I have tweaked my markup somewhat from the default WordPress comment form, so you will need to make changes to account for your markup. Here is the markup for my form:<\/p>\n\n<div class=\"codeblock\"><code>\n&lt;form&nbsp;action=\"#\"&nbsp;method=\"post\"&nbsp;id=\"commentform\"&gt;<br \/>&nbsp;&lt;p&nbsp;class=\"required\"&gt;*&nbsp;Denotes&nbsp;Required&nbsp;Field&lt;\/p&gt;<br \/>&nbsp;&lt;ol&nbsp;class=\"forms\"&gt;<br \/>&nbsp;&nbsp;&lt;li&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\"author\"&gt;Name&nbsp;&lt;span&nbsp;class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"text\"&nbsp;class=\"requiredField\"&nbsp;name=\"author\"&nbsp;id=\"author\"&nbsp;size=\"22\"&nbsp;\/&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&nbsp;&lt;li&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\"email\"&gt;E-Mail&nbsp;&lt;span&nbsp;class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"text\"&nbsp;&nbsp;class=\"requiredField\"&nbsp;name=\"email\"&nbsp;id=\"email\"&nbsp;size=\"22\"&nbsp;\/&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&nbsp;&lt;li&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\"url\"&gt;Website&lt;\/label&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"text\"&nbsp;name=\"url\"&nbsp;id=\"url\"&nbsp;size=\"22\"&nbsp;\/&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&nbsp;&lt;li&nbsp;class=\"textarea\"&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\"comment\"&gt;Comments&nbsp;&lt;span&nbsp;class=\"required\"&gt;*&lt;\/span&gt;&lt;\/label&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;textarea&nbsp;&nbsp;class=\"requiredField\"&nbsp;name=\"comment\"&nbsp;id=\"comment\"&nbsp;cols=\"100%\"&nbsp;rows=\"10\"&gt;&lt;\/textarea&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&nbsp;&lt;li&nbsp;class=\"subscribe-to-comments\"&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"checkbox\"&nbsp;name=\"subscribe\"&nbsp;id=\"subscribe\"&nbsp;value=\"subscribe\"&nbsp;&nbsp;\/&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;label&nbsp;for=\"subscribe\"&gt;Notify&nbsp;me&nbsp;of&nbsp;followup&nbsp;comments&nbsp;via&nbsp;e-mail&lt;\/label&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&nbsp;&lt;li&nbsp;class=\"buttons\"&gt;<br \/>&nbsp;&nbsp;&nbsp;&lt;button&nbsp;type=\"submit\"&nbsp;name=\"submit\"&nbsp;id=\"submit\"&gt;Add&nbsp;Comment&nbsp;&amp;raquo;&lt;\/button&gt;<br \/>&nbsp;&nbsp;&lt;\/li&gt;<br \/>&nbsp;&lt;\/ol&gt;<br \/>&lt;\/form&gt;&nbsp;\n\n<\/code><\/div>\n\n<p>I don&rsquo;t think there is much that I need to discuss about that markup; it is pretty standard. The only thing to mention is the class name of <strong>requiredField<\/strong> on the form fields that I want to be required. <em>Note: I also removed the action on the form so that the sample form cannot really be submitted to the database.<\/em><\/p>\n\n<h2>The jQuery<\/h2>\n<p>I of course am going to show this example using jQuery, but you could create something comparable with any other JavaScript library or just with some plain old JavaScript.<\/p>\n\n<p>Once the document is loaded, let&rsquo;s start by adding a function for when the comment form is submitted:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('form#commentform').submit(function()&nbsp;&#123;<br \/>&nbsp;&amp;hellip;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Next, we want to remove any errors if they are showing, and create a flag that will let us know if an error has occured:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('form#commentform').submit(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;&lt;strong&gt;$('form#commentform&nbsp;.error').remove();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;&lt;\/strong&gt;<br \/>&nbsp;&nbsp;&amp;hellip;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Ok, here is where we really start to do some coding. I want to take each form field that has a class of <strong>requiredField<\/strong>, check to see if it is empty, copy the name of the label (<em>and remove the required asterisk<\/em>), traverse to the parent list item, and append the error message. Here is where we will also set the hasError flag so that we know an error has occurred:<\/p>\n\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('form#commentform').submit(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;$('form#commentform&nbsp;.error').remove();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \/>&nbsp;&nbsp;&lt;strong&gt;$('.requiredField').each(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;if(jQuery.trim($(this).val())&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;labelText&nbsp;=&nbsp;$(this).prev('label').text().replace('&nbsp;*','');<br \/>&nbsp;&nbsp;&nbsp;&nbsp;$(this).parent().append('&lt;span&nbsp;class=\"error\"&gt;'+labelText+'&nbsp;is&nbsp;a&nbsp;required&nbsp;field.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&nbsp;&#125;<br \/>&nbsp;&nbsp;&#125;);&lt;\/strong&gt;<br \/>&nbsp;&nbsp;&amp;hellip;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n\n<p>Finally, you want to check the <strong>hasError<\/strong> variable to determine whether or not you should submit the form to the server:<\/p>\n<div class=\"codeblock\"><code>\n$(document).ready(function()&nbsp;&#123;<br \/>&nbsp;$('form#commentform').submit(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;$('form#commentform&nbsp;.error').remove();<br \/>&nbsp;&nbsp;var&nbsp;hasError&nbsp;=&nbsp;false;<br \/>&nbsp;&nbsp;$('.requiredField').each(function()&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;if(jQuery.trim($(this).val())&nbsp;==&nbsp;'')&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;labelText&nbsp;=&nbsp;$(this).prev('label').text().replace('&nbsp;*','');<br \/>&nbsp;&nbsp;&nbsp;&nbsp;$(this).parent().append('&lt;span&nbsp;class=\"error\"&gt;'+labelText+'&nbsp;is&nbsp;a&nbsp;required&nbsp;field.&lt;\/span&gt;');<br \/>&nbsp;&nbsp;&nbsp;&nbsp;hasError&nbsp;=&nbsp;true;<br \/>&nbsp;&nbsp;&nbsp;&#125;<br \/>&nbsp;&nbsp;&#125;);<br \/>&nbsp;&nbsp;&lt;strong&gt;if(hasError)&nbsp;&#123;<br \/>&nbsp;&nbsp;&nbsp;return&nbsp;false;<br \/>&nbsp;&nbsp;&#125;&lt;\/strong&gt;<br \/>&nbsp;&#125;);<br \/>&#125;);&nbsp;\n\n<\/code><\/div>\n<p class=\"note\"><em>Note: The end of the script is slightly different on the example form because I did not want to actually submit the form.<\/em><\/p>\n\n<h2>Conclusion<\/h2>\n<p>Just another simple example of how we can improve the user experience by using jQuery. Like usual, there are jQuery plugins out there that can do the same thing, but I think it is important to understand how to do things yourself. Plus, that is only 17 lines of JavaScript compared to much, much more for a plugin.<\/p>\n\n<p>Anyone have any ideas on how to improve the script?<\/p>","14":{"old_id":{}}}}