title: jquery validation to highlight only the label
body: <p>I am validating a form via jquery the validate plugin and the meta data plugin </p>
  
  <p>everything is working perfect except that when validated it turns all the labels red as opposed to just turning the label of the associated field.</p>
  
  <pre><code>                     &lt;label id="jform_first_name-lbl" for="jform_first_name" class="hasTooltip required" title=""&gt;First name&lt;span class="star"&gt;&amp;#160;*&lt;/span&gt;&lt;/label&gt;  
                       &lt;input type="text" name="jform[first_name]" id="jform_first_name" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" /&gt;      
  
                  &lt;label id="jform_surname-lbl" for="jform_surname" class="hasTooltip required" title=""&gt;Surname&lt;span class="star"&gt;&amp;#160;*&lt;/span&gt;&lt;/label&gt;                    
                  &lt;input type="text" name="jform[surname]" id="jform_surname" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" /&gt;        
  
                  &lt;label id="jform_mobile-lbl" for="jform_mobile" class="hasTooltip required" title=""&gt;Mobile&lt;span class="star"&gt;&amp;#160;*&lt;/span&gt;&lt;/label&gt;                    
                  &lt;input type="text" name="jform[mobile]" id="jform_mobile" value="" class="numeric fild {rules:{required:true}}" size="30" required aria-required="true" /&gt;                   
  </code></pre>
  
  <p>and the js below :</p>
  
  <pre><code> jQuery(document).ready(    
  function(){
  
      var returnVar = '';
  
  
  
      jQuery("#member-profile").validate(
      {  
      meta: "rules", 
      submitHandler: function(form) { 
  
  returnVar = '';
      form.submit();
  
      },
  
  
  errorElement: "span",
  errorPlacement: function(error, element) {
    //  element.siblings("label").append(error);
  },
  
  highlight: function(element) {
      jQuery(element).siblings("label").addClass("error");
      returnVar = 'fal';
  },
  
  unhighlight: function(element) {
      jQuery(element).siblings("label").removeClass("error");
  }
  
   } );
  </code></pre>
  
  <p>i know its got to do with this basically :</p>
  
  <pre><code>   highlight: function(element) {
      jQuery(element).siblings("label").addClass("error");
      returnVar = 'fal';
  },
  </code></pre>
  
  <p>so how to i ensure only the label directly preceding the input is highlighted ?</p>
  
  <p>thanks alot !</p>