<p>I have already completed a couple of tutorials on forms and jQuery (<a href="//trevor-davis.com/blog/tutorial/ajax-forms-with-jquery/">Ajax Forms with jQuery</a> and <a href="//trevor-davis.com/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>

<p><img src="//assets.trevor-davis.com/uploads/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>

<p>But, do you really want users to see this error page? <strong>Wouldn’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>

<p>I think so. Before we get started, I created <a href="//assets.trevor-davis.com/play/wordpress-comment-form/">a sample of the WordPress comment form</a>.</p>

<p><a href="//assets.trevor-davis.com/play/wordpress-comment-form/" class="more-link">See Example Page</a></p>

<h2>Creating the Markup</h2>
<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>

<div class="codeblock"><code>
&lt;form action="#" method="post" id="commentform"&gt;<br /> &lt;p class="required"&gt;* Denotes Required Field&lt;/p&gt;<br /> &lt;ol class="forms"&gt;<br />  &lt;li&gt;<br />   &lt;label for="author"&gt;Name &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;<br />   &lt;input type="text" class="requiredField" name="author" id="author" size="22" /&gt;<br />  &lt;/li&gt;<br />  &lt;li&gt;<br />   &lt;label for="email"&gt;E-Mail &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;<br />   &lt;input type="text"  class="requiredField" name="email" id="email" size="22" /&gt;<br />  &lt;/li&gt;<br />  &lt;li&gt;<br />   &lt;label for="url"&gt;Website&lt;/label&gt;<br />   &lt;input type="text" name="url" id="url" size="22" /&gt;<br />  &lt;/li&gt;<br />  &lt;li class="textarea"&gt;<br />   &lt;label for="comment"&gt;Comments &lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;<br />   &lt;textarea  class="requiredField" name="comment" id="comment" cols="100%" rows="10"&gt;&lt;/textarea&gt;<br />  &lt;/li&gt;<br />  &lt;li class="subscribe-to-comments"&gt;<br />   &lt;input type="checkbox" name="subscribe" id="subscribe" value="subscribe"  /&gt;<br />   &lt;label for="subscribe"&gt;Notify me of followup comments via e-mail&lt;/label&gt;<br />  &lt;/li&gt;<br />  &lt;li class="buttons"&gt;<br />   &lt;button type="submit" name="submit" id="submit"&gt;Add Comment &amp;raquo;&lt;/button&gt;<br />  &lt;/li&gt;<br /> &lt;/ol&gt;<br />&lt;/form&gt; 

</code></div>

<p>I don’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>

<h2>The jQuery</h2>
<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>

<p>Once the document is loaded, let’s start by adding a function for when the comment form is submitted:</p>

<div class="codeblock"><code>
$(document).ready(function() {<br /> $('form#commentform').submit(function() {<br /> &amp;hellip;<br /> });<br />}); 

</code></div>

<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>

<div class="codeblock"><code>
$(document).ready(function() {<br /> $('form#commentform').submit(function() {<br />  &lt;strong&gt;$('form#commentform .error').remove();<br />  var hasError = false;&lt;/strong&gt;<br />  &amp;hellip;<br /> });<br />}); 

</code></div>

<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>

<div class="codeblock"><code>
$(document).ready(function() {<br /> $('form#commentform').submit(function() {<br />  $('form#commentform .error').remove();<br />  var hasError = false;<br />  &lt;strong&gt;$('.requiredField').each(function() {<br />   if(jQuery.trim($(this).val()) == '') {<br />    var labelText = $(this).prev('label').text().replace(' *','');<br />    $(this).parent().append('&lt;span class="error"&gt;'+labelText+' is a required field.&lt;/span&gt;');<br />    hasError = true;<br />   }<br />  });&lt;/strong&gt;<br />  &amp;hellip;<br /> });<br />}); 

</code></div>

<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>
<div class="codeblock"><code>
$(document).ready(function() {<br /> $('form#commentform').submit(function() {<br />  $('form#commentform .error').remove();<br />  var hasError = false;<br />  $('.requiredField').each(function() {<br />   if(jQuery.trim($(this).val()) == '') {<br />    var labelText = $(this).prev('label').text().replace(' *','');<br />    $(this).parent().append('&lt;span class="error"&gt;'+labelText+' is a required field.&lt;/span&gt;');<br />    hasError = true;<br />   }<br />  });<br />  &lt;strong&gt;if(hasError) {<br />   return false;<br />  }&lt;/strong&gt;<br /> });<br />}); 

</code></div>
<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>

<h2>Conclusion</h2>
<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>

<p>Anyone have any ideas on how to improve the script?</p>