Question

My CSS knowledge is a bit limited.

Would like to highlight the label in left div when error occurs in right div

messages: { 
    userID: ""

}, 
errorElement: "span",     
    errorPlacement: function(error, element) {         
    element.siblings("label").append(error);     
    },     
    highlight: function(element) {         
    $(element).parent().children("div.left label").addClass("error");    
    },     
    unhighlight: function(element) {         
    $(element).parent().children("div.left label").addClass("error");     
    } 


 <div class="left">
 <label for="userID">Username:</label> <br />
 </div>
<div class="right">    
<input  type="text" name="userID" id="userID" onkeyup="nospaces(this)" maxlength="15" onBlur="checkUID(this)" onKeyPress="hideWarning()">
</div>

Currently “nothing” happens, no error, no highlight. I’m unsure how to modify the errorPlacement script to comply. Thx so very mch.

Answer 1

If you want all labels to be highlighted with the error class, use the setDefaults() function:

if ( jQuery.validator ) {
    jQuery.validator.setDefaults({
        /* Place error labels below invalid fields */
        errorPlacement: function(error, element){
            $('label[for=' + element.attr('id') + ']').addClass("error");
        }
    });
}

$('#commentForm').validate();

http://jsfiddle.net/iknowkungfoo/dvyqN/1/