title: jQuery validate success indicator
body: <p>Ok, I think I have this wrong...but I cant seem to get the answer.  Im just trying to create a success checkmark or indicator that what the user has entered into the input form is valid.  The commented out portion of the script is the idea of what Im trying to achieve.  Here is the script:</p>
  
  <pre><code>$('document').ready(function(){
      $('form').validate({
          rules: {
             a: {required:true, minlength:2},
             b: {required:true}
          },      
          messages: {
             a: {required: "enter your name!"},
             b: {required: "enter the date!"}                        
          },
          errorPlacement: function(error, element) {
          if(element.attr('name') == 'a'){
               $('#name').html(error);                
           }
           if(element.attr('name') == 'b'){
               $('#date').html(error);                
           }
          },
          success: function(error){
              //a: {$('#name').html('nice name!');},
              //b: {$('#date').html('nice date!');}                           
          },
          debug:true
      });
      $('#a').blur(function(){
          $("form").validate().element("#a");
      });
  });
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;form action="#" id='commentForm'&gt;
      &lt;input type="text" name="a" id="a"&gt;
      &lt;input type="text" name="b" id="b"&gt;
      &lt;button type="submit"&gt;Validate!&lt;/button&gt;
  &lt;div id="date" style="border:1px solid blue;"&gt;&lt;/div&gt;
  &lt;div id="name" style="border:1px solid red;"&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Last, but not least, here is the jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/mmw562/wQxQ8/8/" rel="noreferrer">http://jsfiddle.net/mmw562/wQxQ8/8/</a></p>
  
  <p>Many thanks in advance for your help!</p>