title: Form Validation with jquery - Highlight Error Field
body: <p>I need some help with my jquery validation form. I managed to get everything to work except for the highlight of the error text box part. I need the following tho happen:</p>
  
  <p>Whenever an rule get broken for a field, that field must have a yellow background color applied to it for 3 seconds; then it changes back to white.
  Can someone please help me with this?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"&gt;    &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt; 
      $(document).ready(function() {  
      $("#form1").validate({ 
  
  
  
          rules: { 
            name: {
                    required: true,
                    minlength: 3
                  },
  
            date: {
                    date:true
                  },
  
            email: {// compound rule 
              required: true, 
              email: true 
                   }, 
          url: { 
            url: true 
          },
  
  
          }, 
          messages:
          { 
            name: {
            minlength: jQuery.format("At least {0} characters required.")
                  }
          }
  
  
  
  
        }); 
      }); 
    &lt;/script&gt; 
  
  
  &lt;style type="text/css"&gt; 
      * { font-family: Verdana; font-size: 11px; line-height: 14px; } 
      .submit { margin-left: 125px; margin-top: 10px;} 
      .label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; } 
      .form-row { padding: 5px 0; clear: both; width: 700px; } 
      label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; } 
      input[type=text], textarea { width: 250px; float: left; } 
      textarea { height: 50px; } 
  &lt;/style&gt; 
  
  &lt;/head&gt;
   &lt;body&gt;
        &lt;form id="form1" method="post" action=""&gt; 
          &lt;div class="form-row"&gt;&lt;span class="label"&gt;Name *&lt;/span&gt;&lt;input type="text" name="name" /&gt;&lt;/div&gt;
              &lt;div class="form-row"&gt;&lt;span class="label"&gt;Birthdate &lt;/span&gt;&lt;input type="text" name="date" /&gt;&lt;/div&gt;
              &lt;div class="form-row"&gt;&lt;span class="label"&gt;E-Mail *&lt;/span&gt;&lt;input type="text" name="email" /&gt;&lt;/div&gt;
              &lt;div class="form-row"&gt;&lt;span class="label"&gt;Home page&lt;/span&gt;&lt;input type="text" name="url" /&gt;&lt;/div&gt; 
  
            &lt;div class="form-row"&gt;&lt;input class="submit" type="submit" value="Submit"&gt;&lt;/div&gt; 
          &lt;/form&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I tried to plug this in but just can't get it to work:</p>
  
  <pre><code>$(".selector").validate({
    highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
                  .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
   $(element).removeClass(errorClass).addClass(validClass);
   $(element.form).find("label[for=" + element.id + "]")
                  .removeClass(errorClass);
  }
  });
  </code></pre>