jQuery验证在验证表单时忽略隐藏div中的jQuery-select2

Question

在尝试验证表单时，如何忽略隐藏的div中的jquery-select2元素？

<form id="form">
   <div id="hidden" style="display:none">
      <select id="select2">
         <option>1</option>
         <option>2</option>
      </select>
   </div>
</form>

我尝试了下面的代码，但不起作用

<script>
   $("#form").validate({
   ignore: ":hidden",
      rules: {
        select2: {required: true,}
      }
   });

$("#select2").select2();
</script>

Answer 1

jQuery .validate()方法在某种程度上根据验证规则和/或其对应的错误消息来初始化表单。

要检查表单是否有效，您需要单独进行调用。这主要是通过以下方式完成的：

在表单提交之后调用method.

• chaining .valid() .validate()，即$('#form').validate({rules:{}}).form();

1. on form submit

关于这个问题，这里有一些建议：

1. 验证使用名称属性：

select >在js代码行#1中有一个拼写错误(不匹配的引号)表单$(“# ‘).validate({^ignore可以由可以进入.not()方法的任何选择器组成，并且具有缺省值:hidden，因此您可以忽略(双关语)此property/option下面是上述代码的工作片段：单击Submit以检查表单是否有效单击切换选择以显示/隐藏选择<>F243​$("#form").validate({ rules: { select2: {required: true}, fname: {required: true} }, messages: { select2: {required: " select is requirred"}, fname: {required: " first name is required"} }, invalidHandler: function(form) { $("#status").html("INVALID"); }, submitHandler: function(form) { $("#status").html("valid"); } }); $("#toggleSelect").click(function() { $("#hidden").toggle(); }); $("#select2").select2();<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <form id="form"> First Name: <input type="text" id="fname" name="fname"> <div id="hidden" style="display: none;"> Select: <select id="select2" name="select2"> <option></option> <option>1</option> <option>2</option> </select> </div> <br> <input type="submit" name="submit" value="Submit" /> </form> <br> <input type="button" id="toggleSelect" value="Toggle Select"> <br> <p id="status"></p>​

Answer 2

您的设置也是默认设置...

ignore: ":hidden"

这意味着所有隐藏的内容都将被忽略以进行验证。

在尝试验证表单时，如何忽略隐藏在div中的jquery-select2元素？

您的问题没有任何意义，因为无论是否声明ignore: ":hidden"，任何隐藏的div中的所有内容都将被忽略，因为":hidden"设置已经是默认设置。

既然你也有这段代码...

rules: {
    select2: {required: true,}

看起来你而不是真的想忽略隐藏的select2元素。如果是这样的话，为ignore构造一个新的jQuery选择器，它将选择除select2元素之外的所有隐藏元素。

Answer 3

我也遇到过类似的问题。在我的例子中，这是因为我在所有select2元素上对'change‘运行了一个.valid()。

$('.smart-select2').select2({
    ...
}.on('change', function() {
  $(this).valid()
}

因此，本质上这是在所有选择元素(包括隐藏元素)上运行的。

因此，为了解决这个问题，我简单地将上面的代码修改为：

$('.smart-select2').select2({
    ...
}.on('change', function() {
  if ($(this).is(':hidden')) return
  $(this).valid()
}