jQuery Validator，使任一字段为必填项

Posted 2023-05-09

【中文标题】jQuery Validator，使任一字段为必填项

【英文标题】：jQuery Validator, make either field required

【发布时间】：2015-07-20 18:31:52

【问题描述】：

我正在尝试确保用户输入 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

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

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

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

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

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

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

作为我尝试的解决方案：

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

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

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

【问题讨论】：

@Michael Hamilton 感谢您的贡献，我已编辑问题以反映对该问题的进一步理解。

【参考方案1】：

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

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

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

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

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

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

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

groups: 
    ordersize: "ExactOrderSize approxOrderSize"
,

使用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
    

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

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

【讨论】：

哎呀，还是有问题。我遵循了您推荐的所有内容，问题是即使您填写了其中一个字段，它现在也会引发验证错误。

【参考方案2】：

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

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

【讨论】：

我稍微修改了代码以修复该错误。还是不行:(

现在输入的 id 是 ExactOrderSize 但你的 jQuery 选择器是 exactOrderSize。

我实际上已经在代码中修复了这个问题，只是忘记在 *** 问题上更新它。变化现在体现出来了。

你的规则看起来不错。您实际上是否在任何地方（例如提交表单时）调用$('#quoteform').valid()？

不，我没有，我认为 jQuery Validator 为我做到了。他们必须这样做，因为其他必需的规则都有效。

【参考方案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;
  

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

【讨论】：

你说对了一件事！如果这些字段完全显示，例如。我完全关闭了隐藏它们的功能，验证有效！但是，您的解决方案对我不起作用。我尝试的下一件事是在提交表单时显示字段：` $('#quoteform').submit(function() $('#not-exact').show(); $('#yes-exact '）。显示（）; ）; ` 那也不起作用...：/

当你说它不起作用时，你是说验证不起作用还是字段没有隐藏/取消隐藏？

字段取消隐藏，然后它不会抛出适当的错误，并让表单提交。

作为一个控制测试，我一开始就让这些字段永远不会隐藏，并且我的验证规则按预期工作。

*我是说字段以我写的方式取消隐藏，与您想要取消隐藏字段的方式略有不同。

【参考方案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>

【讨论】：

我更愿意继续使用我已经设置好的 jQuery Validator 工具，这需要我做一些完全不同的事情。它必须与 jQuery Validator 库有关...