Question

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

我会尝试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
    });

});

DEMO：http://jsfiddle.net/0arvubxy/

如果要将两个错误消息合并为一个，则可以使用groups选项。
如果您需要移动错误消息，请使用errorPlacement选项。

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

1 个答案: