使用 jQuery 验证以确保至少有一个下拉列表具有值

Question

我是 jQuery、jQuery 验证和 JavaScript 的新手，所以我为我的无知提前道歉。我花了几个小时寻找答案并尝试不同的代码，但我一直无法弄清楚什么看起来应该很简单。

为简单起见，我有两个下拉菜单。一个给苹果，一个给橘子。我想确保在使用 "Approve" 按钮提交表单时至少有一个下拉列表具有值。如果两个下拉列表都没有值，则不应提交表单，并且每个字段旁边的通知应声明类似 "At least one dropdown must have a value" 的内容。然后选择一个下拉菜单时，两个下拉菜单的警告都会消失。

表单代码为：

    <form name="form1" id="form1" action="" method="post">
  <table>
    <tr>
      <td><label for="selApples">Apples</label></td>
      <td><select name="selApples" id="selApples" class="authSelect">
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="selOranges">Oranges</label></td>
      <td><select name="selOranges" id="selOranges" class="authSelect">
          <option value="">None</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" name="btnApprove" id="btnApprove" value="Approve">
        <input type="button" name="btnCancel" id="btnCancel" value="Cancel">
      </td>
    </tr>
  </table>
</form>

我会 post 我尝试 jQuery 但冒着让自己难堪的风险，我不会。有人对解决此问题的最佳方法有任何想法吗？

编辑：因为有人指出我应该使用 require_from_group 这是我的尝试：

$("#btnApprove").on("click", function() {

    $("#form1").validate( {
        ignore: "",
        rules: {    
            selApples: {
                require_from_group: [1, ".authSelect"]
            },              
            selOranges: {
                require_from_group: [1, ".authSelect"]
            }
        }       
    });

});

Answer 1

您的 require_from_group 规则没有任何问题。问题是您已将 .validate() 方法包装在 click 处理程序中。

.validate() 方法是插件初始化 的方式，它永远不会被表单的按钮调用。

$(document).ready(function() {

    $("#form1").validate({ // intialize plugin
        ignore: "",
        rules: {    
            selApples: {
                require_from_group: [1, ".authSelect"]
            },              
            selOranges: {
                require_from_group: [1, ".authSelect"]
            }
        }       
    });

    $("#btnApprove").on("click", function() {
        $("#form1").valid(); // trigger validation
    });

});

演示：http://jsfiddle.net/0arvubxy/

如果您想将两条错误消息合二为一，那么您可以使用 groups 选项。
如果需要移动错误信息，那么使用errorPlacement选项。

使用 jQuery 验证以确保至少有一个下拉列表具有值

Using jQuery validate to ensure at least one dropdown has a value

javascript

jquery

jquery-validate

selectlist