0

ラベルを共有する 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."
        }
    }
});
4

2 に答える 2

1

どうですか

...
if($el.attr('name') == 'state' || $el.attr('name') == 'zip'){
    $el.addClass(errorClass).removeClass(validClass);
    $el.siblings('label:not([generated])').AddErrorClassIfNotAlreadyPresent();
}
...
于 2012-12-11T10:40:39.467 に答える
0

問題を解決するためにバリデーターを使用しないことになりました。両方の要素に「変更」ハンドラーをアタッチし、そこですべての作業を行います。

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); 
    }
});
于 2012-12-11T19:40:50.443 に答える