Question

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

Answer 1

您的解释有点不清楚。我从来没有听说过任何人想要让字段保持空洞......要么是required，要么是optional。

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

1）显示如何使用depends选项以及:filled和:blank自定义选择器。因此，规则的应用可能取决于是否填写了另一个字段或留空。

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

最后的jsFiddle结合了这两个。

You can use a depends function使required规则依赖于另一个字段。

在此示例中，所有字段最初都是“可选的”。但是，每一个都取决于之前的。如果field #1已填满，则field #2会变为required等，You could also use the :blank custom selector in place of the :filled to check the opposite。

你可以改变它以适应几乎任何情况。

DEMO：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/

Answer 2

跟进我上面的评论。

使用基本的jquery选择器，您可以使用.prev()遍历函数选择“previous”元素。

在伪代码术语中，您可以执行类似

的操作

if ( anAddressTextBox.prev().val() != '' ) { // ps: again, this is pseudo-code
  // allow current text object
}

您可能还想查看.closest()和.siblings()

使用匹配的类名验证上述部分，以确保始终位于字段的地址范围内。（即：不检查另一个不是地址文本框的随机字段）

添加一些html / js / jquery代码，以便SO社区能够提供更好的解决方案：）

Answer 3

在上面的答案中等待您的要求，通过使用maxlength = 0验证，我们能够获得有效但必需的空字段。它来自jquery验证支持论坛：

rules: {
    "fieldName" : {maxlength:0}
}

当然，你需要修改其余部分，但这是一个简单的方法让我们只有在字段空白时才有效（即maxlength = 0）

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

3 个答案: