JQuery验证选择元素不包括默认值

Question

我正在尝试验证 Select 元素，如下所示：

<select name="block_name" id="block-name">
 <option value="">Select Block</option>
 <option value="blockA">Block A</option>
 <option value="blockB">Block B</option>
</select>

如果规则如下，通常不会有问题：

rules: {
 block_name: {
   required: true
 }
}

我只想将class="required" 添加到选择元素中。 但我在规则中使用如下函数：

rules: {
 block_name  {
  required: function(element) {
   return $("#blocks").val() >= 2;
        }
    }
}

它使用以下隐藏字段，该隐藏字段具有确定值的数据绑定：

<input type="hidden" name="blocks" id="blocks" value="<?php echo $row_rsCurrentUser['blocks']; ?>">

在rule 中使用此功能时，class="required" 不起作用，因此默认选项元素 <option value="">Select Block</option> 除外

我怎样才能让这个验证但除了默认选项作为选择之外？

提前致谢

Answer 1

我认为你可以定义一个新的类规则，而不是使用内置的class="required"。

$.validator.addClassRules("required_block2", {
    required: function(element) {
        return $("#blocks").val() >= 2;
    }
});

然后在这些元素上使用class="required_block2"。

Answer 2

您可以在函数中添加各种验证：

$("#myform").validate({
  debug: true,
  rules: {
    block_name:  {
      depends: function(element) {
        var blocksIsValid = (Number($("#blocks").val()) >= 2);
        var block_nameIsValid = ($("#block_name").val() !== "");
        $('#output').text('#blocksIsValid:'+blocksIsValid+', #block_nameIsValid: '+block_nameIsValid);
        return blocksIsValid && block_nameIsValid;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myform">
  <select name="block_name" id="block_name" required>
    <option value="">Select Block</option>
    <option value="blockA">Block A</option>
    <option value="blockB">Block B</option>
  </select>
  <input id="blocks" name="blocks" value=""/>
  <input type="submit" value="Validate"/>
  <p id="output"></p>
</form>

如果你对JS条件不熟悉，这里有几点提示：

||（与 OR 相同）至少有一个条件为真；

&&（与 AND 相同）所有条件都必须为真。

使用!（与 NOT 相同）您的条件将被翻转（true 变为 false，false 变为 true）。

阅读更多https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals