ラベルを共有する 2 つの要素があります。
2 つの要素が検証されているため、CSS クラスを追加/削除する必要があります。1 つまたは両方が無効な場合 - ラベルを赤くする必要があります。両方が有効な場合 - ラベルは有効としてマークされます。
ある要素が他の要素の検証をトリガーし、それが最初の要素をトリガーするなど、無限ループに入らずにそれを行う方法を理解できません。
編集:ここで遊ぶ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."
}
}
});