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

我如何才能对此进行验证，但除了默认选项之外，没有其他选择？

预先感谢

Answer 1

我认为您可以定义一个新的类规则，而不是使用内置的/system。

class="required"

然后在这些元素上使用$.validator.addClassRules("required_block2", { required: function(element) { return $("#blocks").val() >= 2; } });。

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

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

2 个答案: