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

我不熟悉jQuery、jQuery验证和JavaScript，因此我为自己的无知提前道歉。我花了数小时寻找答案并尝试不同的代码，但我一直无法理解什么看起来应该是简单的

为了简单起见，我有两个下拉列表。一个苹果，一个橙子。我想确保在使用“批准”按钮提交表单时，至少有一个下拉列表具有值。如果两个下拉列表都没有值，则不应提交表单，每个字段旁边的通知应说明“至少一个下拉列表必须有值”。然后选择一个下拉列表时，两个下拉列表的警告将消失

表格编号为：

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

---

您的

require\u from\u group

规则没有问题。问题是您将

.validate（）

方法包装在

单击处理程序中

.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
    });

});

演示：


如果要将两条错误消息合并为一条，则可以使用
groups
选项

如果需要移动错误消息，请使用
errorPlacement
选项

您只需包含并使用来自集团的
require\u规则即可。谢谢。我确实试过require_group，但我想是因为我还不精通这一点，所以无法让它发挥作用。我想我会再试一次。如果你已经试过了，那么你应该在你的问题中提到它，并展示你的代码尝试，这样我们就可以帮助你工作。“我会在jQuery上发布我的尝试，但冒着让自己难堪的风险，我不会这样做。”~你完全可以展示你的代码尝试，这样我们就可以帮助你，否则，你的问题不那么容易回答，对以后阅读这篇文章的人也没有帮助。正如我提到的，我几乎用尽了我所能找到的一切。我不知道哪个是正确的轨道，这就是为什么我没有发布代码。谢谢你，斯帕奇。我感谢你的帮助。这就是我要找的。
$(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
    });

});