JQuery 验证 select 元素不包括默认值

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" 添加到 select 元素。但是我在规则中使用了一个函数，如下所示：

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>

除外

我怎样才能得到这个来验证，但除了作为 selection 的默认选项之外？

提前致谢

Answer 1

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

$("#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 相同）您的条件将被翻转（真变为假，假变为真）。

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

Answer 2

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

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

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

JQuery 验证 select 元素不包括默认值

JQuery Validate select element not including default value

jquery

jquery-validate