0

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

4

3 回答 3

6

你的解释有些不清楚。我从来没有听说过有人故意让字段保持空白......要么他们是，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/

于 2013-03-24T16:07:57.463 回答
0

跟进我上面的评论。

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

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

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

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

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

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

于 2013-03-24T15:45:33.470 回答
0

根据您在上述答案中的要求，通过使用 maxlength = 0 验证，我们能够拥有一个有效但必需的空字段。它来自 jquery 验证支持论坛：

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

当然，您需要修改其余部分，但这是我们让字段仅在其为空白时才有效的一种简单方法（又名 maxlength = 0）

于 2014-10-31T21:56:48.430 回答