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

您可以使用dependsvalidate 插件提供的选项来执行此操作。

注意：删除值不是验证的一部分

$('#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 回答
3

在字段上设置name属性input可以解决问题。

JSFiddle

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

该debug选项对于查找此类错误很有用。

$('#search').validate({debug: true});
于 2013-04-24T13:59:20.690 回答