jquery validation to highlight only the label

Question

I am validating a form via jquery the validate plugin and the meta data plugin

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.

                     <label id="jform_first_name-lbl" for="jform_first_name" class="hasTooltip required" title="">First name<span class="star">&#160;*</span></label>  
                     <input type="text" name="jform[first_name]" id="jform_first_name" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />      

                <label id="jform_surname-lbl" for="jform_surname" class="hasTooltip required" title="">Surname<span class="star">&#160;*</span></label>                    
                <input type="text" name="jform[surname]" id="jform_surname" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />        

                <label id="jform_mobile-lbl" for="jform_mobile" class="hasTooltip required" title="">Mobile<span class="star">&#160;*</span></label>                    
                <input type="text" name="jform[mobile]" id="jform_mobile" value="" class="numeric fild {rules:{required:true}}" size="30" required aria-required="true" />                   

and the js below :

 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");
}

 } );

i know its got to do with this basically :

   highlight: function(element) {
    jQuery(element).siblings("label").addClass("error");
    returnVar = 'fal';
},

so how to i ensure only the label directly preceding the input is highlighted ?

thanks alot !

Answer 1

If this is what your html looks like, then jQuery(element).siblings("label") selects all labels, because they are all contained in the same element and are thus siblings with eachother. To prevent this, you should put all label+input pairs in to their own element, like so

<div>
    <label id="jform_first_name-lbl" for="jform_first_name" class="hasTooltip required" title="">First name<span class="star">&#160;*</span></label>  
    <input type="text" name="jform[first_name]" id="jform_first_name" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />      
</div>
<div>
    <label id="jform_surname-lbl" for="jform_surname" class="hasTooltip required" title="">Surname<span class="star">&#160;*</span></label>                    
    <input type="text" name="jform[surname]" id="jform_surname" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />        
</div>
<div>
    <label id="jform_mobile-lbl" for="jform_mobile" class="hasTooltip required" title="">Mobile<span class="star">&#160;*</span></label>                    
    <input type="text" name="jform[mobile]" id="jform_mobile" value="" class="numeric fild {rules:{required:true}}" size="30" required aria-required="true" />
</div>

Alternatively you can change siblings to https://api.jquery.com/prev/