Simplified code by using jQuery validate plugin.

themes/blueprint/css/styles.css

@@ -2051,6 +2051,10 @@ p.feedbackHeader {
   line-height: 2.5;
 }
 
+#contact_form .invalid {
+  background-color: white;
+}
+
 /* changes the text on the feedback home page */
 .feedbackPageLabel {
     color: black;

themes/blueprint/js/feedback.js

-/*global alert, path, tabImage*/
+/*global alert, tabImage*/
 
 // This overrides settings in jquery.tabSlideOut.v2.0.js
-$(function(){
+$(document).ready(function(){
   $('.slide-out-div').tabSlideOut({
     pathToTabImage: tabImage,
     imageHeight: '86px',
@@ -13,7 +13,7 @@ $(function(){
 });
 
 // This is the ajax for the feedback
-$(function() {
+$(document).ready(function(){
   $('.error').hide();
   $("div#slideOut").removeClass('slideOutForm');
   $('input.text-input').addClass('feedbackDeselect');
@@ -24,42 +24,17 @@ $(function() {
     $(this).removeClass('feedbackSelect').addClass('feedbackDeselect');
   });
 
-  $(".button").click(function() {
+  $('#contact_form form').validate();
+  $('#contact_form form').unbind('submit').submit(function() {
     // validate and process form here
-    // first hide error messages
-    $('.submit_button').hide();
-    $('.error').hide();
+    var name = $("input#name");
+    var email = $("input#email");
+    var comments = $("textarea#comments");
+    if (!$(this).valid() || !name.valid() || !email.valid() || !comments.valid()) { return false; }
 
-    var name = $("input#name").val();
-    if (name == "") {
-      $("label#name_error").show();
-      $("input#name").focus();
-      return false;
-    }
-    var email = $("input#email").val();
-    if (email == "") {
-      $("label#email_error").show();
-      $("input#email").focus();
-      return false;
-    }
-    function validateEmail(email) {
-      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(email);
-    }
-    if(!validateEmail(email)) {
-      $("label#invalid_email_error").show();
-      $("input#email").focus();
-      return false;
-    }
-    var comments = $("textarea#comments").val();
-    if (comments == "") {
-      $("label#comments_error").show();
-      return false;
-    }
-    $('input#submit_btn').hide();
+    var dataString = 'name='+ encodeURIComponent(name.val()) + '&email='
+        + encodeURIComponent(email.val()) + '&comments=' + encodeURIComponent(comments.val());
 
-    var dataString = 'name='+ encodeURIComponent(name) + '&email='
-        + encodeURIComponent(email) + '&comments=' + encodeURIComponent(comments);
     // Grabs hidden inputs
     var formSuccess = $("input#formSuccess").val();
     var feedbackSuccess = $("input#feedbackSuccess").val();
@@ -67,7 +42,7 @@ $(function() {
 
     $.ajax({
       type: "POST",
-      url: path + '/Feedback/Email',
+      url: $(this).attr('action'),
       data: dataString,
       success: function() {
         $('#contact_form').html("<div id='message'></div>");
@@ -82,6 +57,6 @@ $(function() {
           alert(feedbackFailure);
       }
     });
-  return false;
+    return false;
   });
 });

themes/blueprint/templates/feedback/form.phtml

 <div id="contact_form">
-  <form method="post">
+  <form method="post" action="<?=$this->url('feedback-email')?>">
     <p class="feedbackHeader"><b><?=$this->transEsc("Send us your feedback!")?></b></p>
     <label for="name" style="line-height: 2.5;">
       <?=$this->transEsc("feedback_name")?></label>
     <label class="error" for="name">
-      <?=$this->transEsc("Please enable JavaScript.")?></label>
-    <label class="error" for="name" id="name_error">
-      <?=$this->transEsc("This field is required")?>.</label><br />
-    <input type="text" id="name" size="30" class="text-input" /><br />
+      <?=$this->transEsc("Please enable JavaScript.")?></label><br />
+    <input type="text" id="name" size="30" class="text-input <?=$this->jqueryValidation(array('required'=>'This field is required'))?>" /><br />
     <label for="email" style="line-height: 2.5;">
-      <?=$this->transEsc("Email")?></label>
-    <label class="error" for="email" id="email_error">
-      <?=$this->transEsc("This field is required")?>.</label>
-    <label class="error" for="email" id="invalid_email_error">
-      <?=$this->transEsc("Email address is invalid")?>.</label><br />
-    <input type="text" id="email" size="30" class="text-input" /><br />
+      <?=$this->transEsc("Email")?></label><br />
+    <input type="text" id="email" size="30" class="text-input <?=$this->jqueryValidation(array('required'=>'This field is required', 'email'=>'Email address is invalid'))?>" /><br />
     <label for="comments" style="line-height: 2.5;">
-      <?=$this->transEsc("Comments")?></label>
-    <label class="error" for="comments" id="comments_error">
-      <?=$this->transEsc("This field is required")?>.</label><br />
-    <textarea id="comments" style="width:250px;height:130px"></textarea><br />
+      <?=$this->transEsc("Comments")?></label><br />
+    <textarea id="comments" style="width:250px;height:130px" class="<?=$this->jqueryValidation(array('required'=>'This field is required'))?>"></textarea><br />
     <input type="submit" class="button" value="<?=$this->transEsc("Send")?>" />
     <input type="hidden" id="formSuccess" value="<?=$this->transEsc("Form Submitted!")?>"/>
     <input type="hidden" id="feedbackSuccess" value="<?=$this->transEsc("Thank you for your feedback.")?>"/>