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);
                        }
                    }
                }
            });

我的想法是上面的“依赖”语句应该确保页面只在被调用的函数返回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');
            }
        }
    }
}

如果B已填写，则

depends将返回true并激活required上的A规则。相同的逻辑应用于字段B。

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

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

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

Jquery验证：如何验证一组文本框中的全部或全部都没有值？

1 个答案: