jquery - jquery validate：突出显示两个元素之间共享的标签

Question

我有两个共享标签的元素。

我需要在其上添加/删除一个 CSS 类，因为这两个元素正在被验证。如果一个或两个无效 - 标签需要变成红色。如果两者都有效 - 标签被标记为有效。

在没有进入无限循环的情况下无法弄清楚如何做到这一点，其中一个元素触发另一个元素的验证，而后者又触发第一个元素的验证，等等。我现在只能考虑使用突出显示/取消突出显示方法。

编辑：这是一个jsfiddle玩。

$("#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

关于什么

...
if($el.attr('name') == 'state' || $el.attr('name') == 'zip'){
    $el.addClass(errorClass).removeClass(validClass);
    $el.siblings('label:not([generated])').AddErrorClassIfNotAlreadyPresent();
}
...

Answer 2

最终没有使用验证器来解决问题。我将一个“更改”处理程序附加到两个元素并在那里完成所有工作。

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