javascript - Jquery验证: How to validate that all or none of a group of textboxes have values?

Question

我有一个由几十个标签和文本框组成的表单。但为了简单起见，假设我只有六个这样的项目:

<div class="price-row">
    <span>A-text</span>
    <input type="text" id="input-A" name="A" required>
</div>
<div class="price-row">
    <span>B-text</span>
    <input type="text" id="input-B" name="B" required>
</div>
<div class="price-row">
    <span>C-text</span>
    <input type="text" id="input-C" name="C" required>
</div>
<div class="price-row">
    <span>D-text</span>
    <input type="text" id="input-D" name="D" required>
</div>
<div class="price-row">
    <span>E-text</span>
    <input type="text" id="input-E" name="E" required>
</div>
<div class="price-row">
    <span>F-text</span>
    <input type="text" id="input-F" name="F" required>
</div>

规则如下:

如果 A 有值，则 B 也必须有值。反之亦然。 如果 C、D、E 或 F 有一个值，那么每个输入都必须有一个值。

此处的值表示“文本长度> 0”。但实际上，我还会检查一些有效性(是否是一个数字，是否是一个有效的电子邮件地址等)

我尝试验证第一组规则，即与 A 和 B 相关的规则，但这不起作用:

$("#myform").validate({
                rules: {
                    A: {
                        depends: function(element) {
                            ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
                        }
                    }
                }
            });

我的想法是，上面的“depends”语句应该确保页面仅在调用的函数返回 True 时才验证。但即使其中一个文本区域有文本而另一个文本区域没有，我也可以提交表单。

为什么会这样，我该怎么办？

Answer 1

你的代码...

rules: {
    A: {
        depends: function(element) {
            ....
        }
    }
}

不存在depends这样的东西。规则。

depends is a property that goes under an existing rule in order to "apply the rule only in certain conditions" .

rules: {
    A: {
        required: {
            depends: function(element) {
                // return true or false here
            }
        }
    }
}

每当 depends函数返回true ，关联required规则已激活。

话虽这么说，功能/逻辑是有缺陷的......

depends: function(element) {
    ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
}

• 您需要 return声明。
• 您不能使用($("#input-A").val().length > 0)作为 depends 的一部分功能在required下输入A因为它总是评估为 false 。它总是从空开始的，对吧？ (此外，根据同一字段自己的内容更改字段的规则是没有意义的......您可能永远无法满足此规则。)

<小时/>

尝试更多类似这样的事情......

rules: {
    A: {
        required: {
            depends: function(element) {
                return $("#input-B").is(':filled');
            }
        }
    },
    B: {
        required: {
            depends: function(element) {
                return $("#input-A").is(':filled');
            }
        }
    }
}

depends将返回true如果 B 已填写并激活 required规则 A 。同样的逻辑适用于字段 B .

工作演示:http://jsfiddle.net/t9y2x3jf/

注意:您必须删除任何内联 HTML5 required来自您的 input 的属性元素，否则，这些将覆盖您的 depends逻辑。

<input type="text" id="input-A" name="A" />