jQuery Validator,要求任何一个字段

Question

我试图确保用户输入2个字段中的1个,"ExactOrderSize"或"approxOrderSize".

<p>Exact size of your order (# of items)</p>
<input id="ExactOrderSize" type="text" name="ExactOrderSize">

<p>Approximate size of your order</p>
<select id="approxOrderSize"  name="approxOrderSize" >
    <option value="" selected="selected"></option>
    <option value="0">0-35</option>
    <option value="35">35-50</option>
    <option value="50">50-100</option>
</select>

为此,我使用jQuery Validator的帮助.一切都运行良好,除了这个自定义验证规则,似乎什么都不做.

$('#quoteform').validate({
  rules: {
    FirstName: {
      required: true
    },
    LastName: {
      required: true
    },
    approxOrderSize: {
      required: function() {
        if($('#ExactOrderSize').val()=="")
          return true;
        else
          return false;
      }
    },
    DateNeededBy: {
      required: true
    }
  }
});

我的想法是基本上运行一个函数,如果#ExactOrderSize字段没有填写,则#approxOrderSize需要字段.AKA集required = true

到目前为止,我们从StackOverflow答案中发现的问题是,问题在于可能隐藏的两个领域.首次加载页面时,最初都不显示#ExactOrderSize或#approxOrderSize.

他们必须单击这两个按钮之一才能显示该字段:

根据他们选择的按钮,幻灯片动画会显示相应的字段.

"是" - >显示#ExactOrderSize字段

"否" - >显示#approxOrderSize字段

我虽然这将是一个很好的用户界面,但显然它导致验证消息能够显示的问题,这使得jQuery验证不起作用.

作为我尝试的解决方案:

$('#quoteform').submit(function() {
    $('#not-exact').show();
    $('#yes-exact').show();
 });

这样,所有字段将在表单提交后显示..但它仍然不起作用.

PS实际页面在这里,如果你想看看它.

Answer 1

我试图确保用户输入 2 个字段中的 1 个

这个插件中已经内置了一个规则，require_from_group它就是这样做的。

1. 包含文件additional-methods.js以获取此规则。

2. class在这两个字段中添加 aExactOrderSize和approxOrderSize。就像是ordersize。

3. .validate()像这样在方法中声明规则......

   rules: {
       ExactOrderSize: {
           require_from_group: [1, '.ordersize']
       },
       approxOrderSize: {
           require_from_group: [1, '.ordersize']
       },
       // your other fields/rules
   },
   

4. 使用该groups选项可确保这两个字段都只有一条错误消息。

   groups: {
       ordersize: "ExactOrderSize approxOrderSize"
   },
   

5. 使用该errorPlacement选项将错误消息放置在对这两个字段更有意义的位置。

   errorPlacement: function (error, element) {
       if ($(element).hasClass("ordersize")) {
           error.insertBefore(element.prev('p')); // custom error placement
       } else {
           error.insertAfter(element);  // default error placement
       }
   }
   

6. 注意：默认情况下，插件将忽略所有隐藏字段。要禁用此功能，只需将选项设置为ignore，任何内容[]都不会被忽略。然后，您可以根据一些自定义事件处理程序简单地显示/隐藏输入字段。

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