jQuery 验证器，将任一字段设为必填

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 字段成为必填字段。 A.K.A。设置 required = true

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

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

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

"Yes" --> 显示#ExactOrderSize 字段

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

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

作为我尝试过的解决方案：

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

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

P.S。实际页面是HERE，如果你想看的话。

Answer 1

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

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

Answer 2

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

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>

Answer 3

在 firebug 中尝试了一下，我想我有一个解决方案。当用户提交表单并进行验证时，在 return true 或 false 验证 approxOrderSize 之前，我们应该显示正确的字段并隐藏另一个.例如，如果用户没有在 ExactOrderSize 字段中输入任何内容，当他们提交表单时，approxOrderSize 的验证器会检查 ExactOrderSize 是否有值。如果它没有值，隐藏该字段并显示 approxOrderSize、then return true.

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

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

Answer 4

I am trying to make sure the user enters 1 of 2 fields

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

包含 the additional-methods.js file 以获得此规则。
向这两个字段 ExactOrderSize 和 approxOrderSize 添加 class。像 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 设置为 [] 即可，不会忽略任何内容。然后你可以简单地 show/hide 基于一些自定义事件处理程序的输入字段。

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

jQuery 验证器，将任一字段设为必填

jQuery Validator, make either field required

validation

jquery

jquery-validate