jQuery Validate插件,如果另一个字段为空,则一个字段必须为空

Question

我有一个包含多个地址字段的表单.如果前一个字段已经填写,我想只允许在一个字段中输入.我正在使用jquery validate,并希望继续这样做.我们的想法是,虽然除了第一个领域之外,实际上并不需要这些领域,但你不能在其余领域留下空白.因此,如果字段3为空,则您不能在字段4中包含数据.一种方法可能是仅在将数据输入上一个字段时启用字段,但不确定如何在此上下文中执行此操作.

Answer 1

你的解释有点不清楚.我从来没有听说过任何人想要让田地保持空洞......无论是他们required还是他们optional.

这是一个由两部分组成的答案:

1)演示如何使用depends与一起选项:filled和:blank自定义选择.因此,规则的应用可以取决于是填充另一个字段还是留空.

2)显示如何编写自定义规则,如果该字段未留空则会发出错误.

最后的jsFiddle结合了这两个.

您可以使用depends函数使required规则依赖于另一个字段.

在此示例中,所有字段最初都是"可选的".但是,每一个都取决于之前的.如果field #1已填充,则field #2变为required等等. 您也可以使用:blank自定义选择器代替:filled相反检查.

您可以改变它以适应几乎任何情况.

演示:http: //jsfiddle.net/Rvhmd/

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field2: {
                required: {
                    depends: function (element) {
                        return $("#field1").is(":filled");
                    }
                }
            },
            field3: {
                required: {
                    depends: function (element) {
                        return $("#field2").is(":filled");
                    }
                }
            },
            field4: {
                required: {
                    depends: function (element) {
                        return $("#field3").is(":filled");
                    }
                }
            }
        }
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
    <input type="text" name="field3" id="field3" />
    <input type="text" name="field4" id="field4" />
    <input type="submit" />
</form>

为了给OP提供他所要求的内容,这里有一个自定义的方法/规则empty,如果该字段不为空则会给出错误.

$(document).ready(function () {

    $.validator.addMethod('empty', function(value, element) {
        return (value === '');
    }, "This field must remain empty!");

    $('#myform').validate({ // initialize the plugin
        rules: {
            field: {
                empty: true  // error if field is not empty
            }
        }
    });

});

工作演示:http: //jsfiddle.net/4C2U3/

您可以将此自定义empty规则与depends上面的选项结合使用,以实现您想要的任何内容.

        rules: {
            field: {
                empty: {
                    depends: function (element) {
                        return $("#other_field").is(":blank");
                    }
                }
            }
        }

这是我认为OP想要的最接近的:

http://jsfiddle.net/qCJ8T/