jquery验证：如何验证一组文本框中是全部还是全部没有值？ [英] Jquery validate: How to validate that all or none of a group of textboxes have values?

问题描述

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

 < div class =price-row> 
< span> A文字< / span> 
< input type =textid =input-Aname =Arequired> 
< / div> 
< div class =price-row> 
< span> B文字< / span> 
< input type =textid =input-Bname =Brequired> 
< / div> 
< div class =price-row> 
< span> C-text< / span> 
< input type =textid =input-Cname =Crequired> 
< / div> 
< div class =price-row> 
< span> D-text< / span> 
< input type =textid =input -Dname =Drequired> 
< / div> 
< div class =price-row> 
< span>电子文本< / span> 
< input type =textid =input -Ename =Erequired> 
< / div> 
< div class =price-row> 
< span> F-text< / span> 
< input type =textid =input-Fname =Frequired> 
< / 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。但我可以提交表格，即使其中一个文本区域有文本，而另一个文本区域没有。

为什么是这样的，我应该怎么做呢？

解决方案

您的代码...

 规则：{
 A：{
 depends：function（element）{
 .... 
} 
} 
} 
  

不存在 depends 规则的情况。

取决于是一种 属性 ，它在现有规则下进行，以便仅在特定条件下应用规则 。 p>

 规则：{
 A：{
 required：{
 depends：function（element）{ 
 //在此处返回true或false 
 
 
 
 
 $ $ $ $ $ $ $ $ 
 
 
每当取决于功能时在$  true 时，相关的所需规则被激活。
 
 
 <这就是说，函数/逻辑是有缺陷的... 
 
 
  depends：function（element）{
 （$（＃input-A）。val（）。length> 0）==（$（＃input-B）.val（）.length> 0）; 
} 
  
 
 
 
 
 
您需要一个返回语句。
 
 
您不能使用（$（＃input-A）.val（）。length> 0）作为函数的一部分依赖于必需函数，用于输入 A ，因为它总是评估为 false 。它总是从空洞开始，对吧？ （此外，根据相同字段自己的内容更改字段规则是没有意义的......您可能永远无法满足此规则。）
  
 
 
 
 
 
 
 
尝试更类似这样的内容...  
 
 
规则：{
 A：{
 required：{
 depends：function（element）{
 return $（＃input-B ）。充满'）; （
）
} 
}，
 B：{
 required：{
 depends：function（element）{
 return $（＃b $ 。输入-A）为（ '：填充'）; 
} 
} 
} 
} 
  
  depends 将返回 true 如果填写了B并激活了 required  >规则 A 。相同的逻辑适用于 B 。
 
 
 
 工作DEMO： http://jsfiddle.net/t9y2x3jf/   
 
 
 
  ： 必须 从中删除​​任何内联HTML5 必需输入元素，否则这些将覆盖 depends 逻辑。
 < input type =textid =input-Aname =A/> 
  
 
I have a form consisting of a couple of dozen labels and textboxes. But for simplicity's sake, let's say I have only six such items:
<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>
And the rules are as follows:

If A has a value, then B must also have a value. And vice versa.
If C, D, E or F has a value, then every input has got to have a value.

A value here means "has text of length > 0". But in reality, I also check some validity (is it a number, is it a valid e-mail address, etc.)

I have tried to validate the first set of rules, the ones pertaining to A and B, but this does not work:
$("#myform").validate({
                rules: {
                    A: {
                        depends: function(element) {
                            ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
                        }
                    }
                }
            });
My thinking is that the above "depends" statement should make sure that the page only validates if the function called returns True. But I can submit the form even if one of the text areas has text and the other doesn't.

Why is this, and what should I do instead?
解决方案
Your code...
rules: {
    A: {
        depends: function(element) {
            ....
        }
    }
}
There is no such thing as a depends rule.

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
            }
        }
    }
}
Whenever the depends function returns true, the associated required rule is activated.

That being said, the function/logic is flawed...
depends: function(element) {
    ($("#input-A").val().length > 0) == ($("#input-B").val().length > 0);
}



You need a return statement.
You can't use ($("#input-A").val().length > 0) as part of the depends function under required for input A because it will always evaluate to false.  It always starts off empty, right?  (Besides, it doesn't make sense to change the field's rule based upon the same field's own content... you'd probably never be able to satisfy this rule.)




Try something more like this...
rules: {
    A: {
        required: {
            depends: function(element) {
                return $("#input-B").is(':filled');
            }
        }
    },
    B: {
        required: {
            depends: function(element) {
                return $("#input-A").is(':filled');
            }
        }
    }
}
depends will return true if B is filled out and activate the required rule on A.  The same logic is applied to field B.

Working DEMO:  http://jsfiddle.net/t9y2x3jf/

NOTE:  You must remove any inline HTML5 required attributes from your input elements, otherwise, these will over-ride your depends logic.
<input type="text" id="input-A" name="A" />


                        
这篇关于jquery验证：如何验证一组文本框中是全部还是全部没有值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！