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()方法根据验证规则和/或相应的错误消息初始化表单。

要检查表单是否有效，您需要单独拨打电话。主要是通过以下方式完成：

调用.valid()方法。
在.form()之后链接.validate()，即$('#form').validate({rules:{}}).form();
表单提交

提出疑问，这里有一些指示：

验证使用name属性：

＆lt; select id =“select2” name =“select2”＆gt;

js代码行号＃1

$("#form').validate({
        ^

ignore可以包含任何可以进入.not()方法并且默认值为:hidden的选择器，因此您可以忽略（双关语）此属性/选项

以下是上述的工作片段：

点击提交以检查表单是否有效
点击切换选择以显示/隐藏选择

$("#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元素？

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

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

rules: {
    select2: {required: true,}

你似乎不真的想忽略隐藏的select2元素。如果是这种情况，请为ignore构建一个新的jQuery Selector，选择除你的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()
}

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

3 个答案: