1

jquery-validate 1.11.0 の使用

私のフォームでは、フィールド A にテキストを入力すると、フィールド B と C が必須になるという条件があります。フィールド B にテキストを入力すると、A & C が必須になります。また、フィールド D にテキストがある場合は、それを消去します。

フィールド D にテキストが入力されている場合は、フィールド A、B、C をクリアして不要にします。

最初にフィールド A に入力すると、必要に応じて他の 2 つのフィールドをバイパスして送信されるように見えるというバグがあります。最初にフィールド b または c に入力すると、フィールド A が必須になります。

http://jsfiddle.net/rockitdev/mxtXX/47/

<form id="search" name="search" method="post" action="">
    <label for="a">Text A</label>
    <input id="a" type="text" class="search-person" />
    <label for="b">Text B</label>
    <input id="b" type="text" class="search-person" />
    <label for="c">Text C</label>
    <input id="c" type="text" class="search-person" />
    <label for="d">Text D</label>
    <input id="d" type="text" class="search-hcn" />
    <p>
        <input class="btn btn-primary" type="submit" value="Submit" />
    </p>
</form>

$('.search-person').focus(function () {
    $('.search-hcn').val(' ').removeClass("required");
    $('.search-person').addClass("required");
});

$('.search-hcn').focus(function () {

    $('.search-person').val(' ').removeClass("required");
    $('.search-hcn').addClass("required");
});

$('#search').validate();
4

2 に答える 2

8

dependsこれを行うには、検証プラグインによって提供されるオプションを使用できます。

注: 値の削除は検証の一部ではありません

$('#search').validate({
    rules: {
        a: {
            required: {
                depends: function(element) {
                    return $('#b').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        b: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#c').val().length > 0
                }
            }
        },
        c: {
            required: {
                depends: function(element) {
                    return $('#a').val().length > 0 || $('#b').val().length > 0
                }
            }
        },
        d: {
            required: {
                depends: function(element) {
                    return $('#a').val().length == 0 || $('#b').val().length == 0 && $('#c').val().length == 0
                }
            }
        }
    }
});

デモ:フィドル

于 2013-04-24T14:01:01.667 に答える