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 字段设为必需。又名设置required = true

到目前为止，我们从 StackOverflow 的答案中发现，问题在于可能隐藏的两个字段。当页面首次加载时，最初不会显示 #ExactOrderSize 或 #approxOrderSize。

他们必须单击以下两个按钮之一才能显示该字段：

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

“是” --> 显示#ExactOrderSize 字段

"No" --> 显示#approxOrderSize 字段

虽然这将是一个不错的用户界面，但显然它会导致无法显示验证消息的问题，这使得 jQuery Validation 无法正常工作。

作为我尝试的解决方案：

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

这样表单提交后所有字段都会显示..但它仍然不起作用。

附：如果您想查看，实际页面是HERE。

Answer 1

我正在尝试确保用户输入了 2 个字段中的 1 个

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

1. 包含the additional-methods.js file 以获取此规则。

2. 将class 添加到这两个字段ExactOrderSize 和approxOrderSize。类似ordersize。

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

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

4. 使用the groups option 确保这两个字段只有一条错误消息。

   groups: {
       ordersize: "ExactOrderSize approxOrderSize"
   },
   

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

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

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

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

Answer 2

jQuery 验证器规则适用于具有匹配 name 属性的元素，而不是匹配的 id 属性。试试这个：

OrderRange: {
  required: function() {
    if($('#exactOrderSize').val()=="")
      return true;
    else
      return false;
  }
}

Answer 3

在萤火虫中玩弄一下我想我有一个解决方案。 当用户提交表单并进行验证时，在对approxOrderSize 的验证中返回true 或false 之前，我们应该显示正确的字段并隐藏另一个字段。例如，如果用户没有在ExactOrderSize 字段中输入任何内容，当他们提交表单时，approxOrderSize 的验证器会检查ExactOrderSize 是否有值。如果它没有值，隐藏该字段并显示approxOrderSize，然后返回true。

approxOrderSize: {
  required: function() {
    if($('#ExactOrderSize').val()=="")
      $("#NoExact").trigger("click");
      return true;
    else
      $("#YesExact").trigger("click");
      return false;
  }
}

至少在我的实验中，这似乎有效，因为它显示了现在需要的字段并显示该字段的验证消息。

Answer 4

我认为这对你有用。在这里，我在表单提交时调用了函数，它检查两个元素中的一个是否必须填写。

function validateMyForm() {
  var a = document.getElementById('exsize').value.length;
  var b = document.getElementById('opt').value.length;
  if (a == 0 && b == 0) {
    alert("Please fill either of the Fields");
  } else {
    //success
  }
}

<form onsubmit='return validateMyForm()'>
  <table>
    <tr>
      <td>
        <input type="text" placeholder="Exact size of order" id="exsize" />
      </td>
    </tr>
    <tr>
      <td>
        <select id="opt">
          <option value="" disabled selected>Select Size</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="submit" />
      </td>
    </tr>
  </table>
</form>