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。

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

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

“是” - ＆gt;显示#ExactOrderSize字段

“否” - ＆gt;显示#approxOrderSize字段

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

作为我尝试的解决方案：

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

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

P.S。如果您想查看，实际页面为HERE。

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我认为这对你有用。在这里，我对表单的提交进行了函数调用，必须填写两个元素中的任何一个。

＆＃13;

＆＃13;

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
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;