Question

I have two elements that share a label.

I need to add/remove a CSS class on it as the two elements are being validated. If one or both are invalid – label needs to turn red. If both are valid – label is marked as valid.

Can’t figure out how to do it without entering an endless loop, where one element triggers the other’s validation, which in turn triggers the first one’s, etc. I can only think of using the highlight/unhighlight methods for now.

EDIT: Here is a jsfiddle to play with.

$("#my-profile-form").validate({
    errorContainer: "#errorProfile",
    highlight: function(el, errorClass, validClass) {
        var $el = $(el);
        if($el.attr('name') == 'state'){
            $el.addClass(errorClass).removeClass(validClass);
            $el.parents('fieldset').addClass('error');
        } else if ($el.attr('name') == 'zip') {
            $el.addClass(errorClass).removeClass(validClass);
        } else {
            $el.parents('fieldset').addClass(errorClass);
        }
    },
    unhighlight: function(el, errorClass, validClass) {
        var $el = $(el);

        if($el.attr('name') == 'state'){
            $el.removeClass(errorClass).addClass(validClass);
        } else if($el.attr('name') == 'zip') {
            $el.removeClass(errorClass).addClass(validClass);
        } else {
            $el.parents('fieldset').removeClass(errorClass);
        }
    },
    errorPlacement: function(error,element) {
        return true;
    },
    ignore: "", // needed to validate drop-downs in IE
    rules: {
        zip: {
            postalcode: true,
            required: true
        }
    },
    messages: {
        zip: {
            postalcode: " Please specify a valid zip code.",
            required: " The zip field is required."
        }
    }
});

Answer 1

Ended up not using validator to solve the issue. I attach a ‘change’ handler to both elements and do all the work in there.

var v_profile = $("#my-profile-form").data('validator');
$("select.state, input.zip").on('change', { errorClass: v_profile.settings.errorClass, validClass: v_profile.settings.validClass }, function(ev){
    var validator = $(this).parents('form').data('validator');
    var res1 = validator.element( "select.state" );
    var res2 = validator.element( "input.zip" );
    if(res1 && res2){ 
        $(this).parents('fieldset').addClass(ev.data.validClass).removeClass(ev.data.errorClass); 
    } else { 
        $(this).parents('fieldset').addClass(ev.data.errorClass).removeClass(ev.data.validClass); 
    }
});