Bootstrap整合select2以及jquery.validate.js校验select2框架失效解决方案

最新推荐文章于 2023-03-14 14:29:45 发布

zgphacker2010

最新推荐文章于 2023-03-14 14:29:45 发布

阅读量1.3k

点赞数

分类专栏： JS&JQuery 文章标签： Bootstrap整合select2 jquery.validate.js校验select2

本文链接：https://blog.csdn.net/zgphacker2010/article/details/100638856

版权

JS&JQuery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

为了方便，这里上次那个JqueryValidate框架整合bootstrap的demo中拿出来修改了

一、Bootstrap整合select2框架

这里使用的是 jquery select2框架的版本号为 Version: 3.4.5

1.下载并导入jquery select2的css和js文件

<!-- 引入jquery select2 css文件-->
<link href="jquery-select2/3.4/select2.min.css" type="text/css" rel="stylesheet" />

<!-- 引入jquery select2 js 文件-->
<script type="text/javascript" src="jquery-select2/3.4/select2.min.js" ></script>

2.编写页面，并使用sleect2美化下拉框：这里直接上源码：

关键性代码，$("#hobby")为页面中的selelect控件

//select2美化下拉框控件
$("#hobby").select2();

源码（index.html）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap整合select2框架</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<!-- sdfdsf-->
		<link href="jquery-select2/3.4/select2.min.css" type="text/css" rel="stylesheet" />
		<style type="text/css">
		/** 
		 * 重新定义错误样式及图标
		 * 1、防止与bootstrap样式中的label冲突 （label: display: block）,导致label换行了
		 * 2、添加错误图标显示 
		 */	
		.requiedField{
			color: red;
		}
		label {
		    display: inline-block;
		    margin-bottom: 0;
		}	
		label.error {
		    background: url(./img/unchecked.gif) no-repeat 5px 3px;
		    padding-left: 24px;
		    color: #EA5200;
		}	
		
		</style>
	</head>
	<body>
		<fieldset >
			<legend>用户注册</legend>
		<form class="form-horizontal" id="registerForm" method="post" onsubmit="return false;">
			<div class="control-group">
				<label class="control-label">昵称</label>
				<div class="controls">
					<input type="text" class="{required:true}" name="nickname" placeholder="请填写昵称" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称2</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:2}" name="nickname2" placeholder="请填写昵称2" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称3</label>
				<div class="controls">
					<input type="text" class="{required:true,maxlength:10}" name="nickname3" placeholder="请填写昵称3" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">用户名</label>
				<div class="controls">
					<input type="text" class="{required:true,username:true,minLength:6,maxlength:20}" name="username" placeholder="请填写用户名" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">密码</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:6,maxlength:20}" id="password" name="password" placeholder="请填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">确认密码</label>
				<div class="controls">
					<input type="text" class="{required:true,equalTo:'#password'}" name="confirmPassword" placeholder="请再次填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">手机号码</label>
				<div class="controls">
					<input type="text" class="{required:true,mobile:true}" name="mobile" placeholder="请填写手机号" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">email</label>
				<div class="controls">
					<input type="text" class="{required:true,email:true}" name="email" placeholder="请填写email" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">年龄</label>
				<div class="controls">
					<input type="text" class="{required:true,min: 18,max:100}" name="age" placeholder="请填写" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<hr />
			以下是否使用了jquery select2框架美化select控件的效果
			<hr />
			<div class="control-group">
				<label class="control-label">职位(默认下拉框)</label>
				<div class="controls">
					<select name="position" id="position">
						<option value="">选择职位</option>
						<option value="1">程序员</option>
						<option value="2">销售员</option>
						<option value="3">服务员</option>
						<option value="4">工人</option>
						<option value="5">其他</option>
					</select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好(使用select2)</label>
				<div class="controls">
					<select name="hobby" id="hobby">
						<option value="">选择爱好</option>
						<option value="1">登山</option>
						<option value="2">游泳</option>
						<option value="3">音乐</option>
						<option value="4">读书</option>
						<option value="5">其他</option>
					</select>
				</div>
			</div>
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary">保存</button>
				<button type="button" class="btn">重置</button>
			</div>
		</form>
		
		</fieldset>
		
		<script type="text/javascript" src="jquery/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/jquery.metadata.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.methods.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.cn.js" ></script>
		<!-- 引入jquery select2 -->
		<script type="text/javascript" src="jquery-select2/3.4/select2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#registerForm").validate({
				  	submitHandler:function(form){
						form.submit();
					}
				});
				//select2美化下拉框控件
				$("#hobby").select2();
			})
			
		</script>
	</body>
</html>

3.效果图：

可以看到，使用了select2美化后，不仅样式好看及自适应内容显示下拉框，还可以使用搜索功能。

二、jquery.validate.js校验select2框架失效解决方案

验证失效问题，这里分两种情况说明：

情况1：直接在select2美化后的select控件中添加 class="{required:true}"：

以下是否使用了jquery select2框架美化select控件的效果
<hr />
<div class="control-group">
	<label class="control-label">职位(默认下拉框)</label>
	<div class="controls">
					<select name="position" id="position" class="{required:true}">
						<option value="">选择职位</option>
						<option value="1">程序员</option>
						<option value="2">销售员</option>
						<option value="3">服务员</option>
						<option value="4">工人</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好(使用select2)</label>
				<div class="controls">
					<select name="hobby" id="hobby" class="{required:true}">
						<option value="">选择爱好</option>
						<option value="1">登山</option>
						<option value="2">游泳</option>
						<option value="3">音乐</option>
						<option value="4">读书</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>

问题：当选择了其他选项选择后，无法进行校验了，页面一直提示为必填项了

表单验证初始化的时候正常：

解决办法：

在select2控件中添加chang事件，让验证框架进行验证

<script type="text/javascript">
$(function(){
	$("#registerForm").validate({
			submitHandler:function(form){
						form.submit();
			}
	});
	//select2美化下拉框控件
	$("#hobby").select2();
	/** 添加事件 */
	$("#hobby").change(function(){
		$(this).valid();
	});

})			
</script>

解决后效果图：

源码（index2.html）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery.validate.js校验select2框架失效</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<!-- sdfdsf-->
		<link href="jquery-select2/3.4/select2.min.css" type="text/css" rel="stylesheet" />
		<style type="text/css">
		/** 
		 * 重新定义错误样式及图标
		 * 1、防止与bootstrap样式中的label冲突 （label: display: block）,导致label换行了
		 * 2、添加错误图标显示 
		 */	
		.requiedField{
			color: red;
		}
		label {
		    display: inline-block;
		    margin-bottom: 0;
		}	
		label.error {
		    background: url(./img/unchecked.gif) no-repeat 5px 3px;
		    padding-left: 24px;
		    color: #EA5200;
		}	
		
		</style>
	</head>
	<body>
		<fieldset >
			<legend>用户注册</legend>
		<form class="form-horizontal" id="registerForm" method="post" onsubmit="return false;">
			<div class="control-group">
				<label class="control-label">昵称</label>
				<div class="controls">
					<input type="text" class="{required:true}" name="nickname" placeholder="请填写昵称" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称2</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:2}" name="nickname2" placeholder="请填写昵称2" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称3</label>
				<div class="controls">
					<input type="text" class="{required:true,maxlength:10}" name="nickname3" placeholder="请填写昵称3" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">用户名</label>
				<div class="controls">
					<input type="text" class="{required:true,username:true,minLength:6,maxlength:20}" name="username" placeholder="请填写用户名" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">密码</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:6,maxlength:20}" id="password" name="password" placeholder="请填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">确认密码</label>
				<div class="controls">
					<input type="text" class="{required:true,equalTo:'#password'}" name="confirmPassword" placeholder="请再次填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">手机号码</label>
				<div class="controls">
					<input type="text" class="{required:true,mobile:true}" name="mobile" placeholder="请填写手机号" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">email</label>
				<div class="controls">
					<input type="text" class="{required:true,email:true}" name="email" placeholder="请填写email" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">年龄</label>
				<div class="controls">
					<input type="text" class="{required:true,min: 18,max:100}" name="age" placeholder="请填写" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<hr />
			以下是否使用了jquery select2框架美化select控件的效果
			<hr />
			<div class="control-group">
				<label class="control-label">职位(默认下拉框)</label>
				<div class="controls">
					<select name="position" id="position" class="{required:true}">
						<option value="">选择职位</option>
						<option value="1">程序员</option>
						<option value="2">销售员</option>
						<option value="3">服务员</option>
						<option value="4">工人</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好(使用select2)</label>
				<div class="controls">
					<select name="hobby" id="hobby" class="{required:true}">
						<option value="">选择爱好</option>
						<option value="1">登山</option>
						<option value="2">游泳</option>
						<option value="3">音乐</option>
						<option value="4">读书</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary">保存</button>
				<button type="button" class="btn">重置</button>
			</div>
		</form>
		
		</fieldset>
		
		<script type="text/javascript" src="jquery/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/jquery.metadata.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.methods.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.cn.js" ></script>
		<!-- 引入jquery select2 -->
		<script type="text/javascript" src="jquery-select2/3.4/select2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#registerForm").validate({
				  	submitHandler:function(form){
						form.submit();
					}
				});
				//select2美化下拉框控件
				$("#hobby").select2();
				/** 添加事件 */
				$("#hobby").change(function(){
			        $(this).valid();
			    });

			})
			
		</script>
	</body>
</html>

情况2：select2美化后的select控件中未使用验证属性（ class="{required:true}"）：

项目中是这种情况，下拉框不使用class属性验证（或者样式有冲突导致验证失效等问题），但是又必须选择相关的内容才能提交。网上所找到的问题大部分是这样的

通过查阅资料，知道了问题所在：

1、使用select2美化select下拉列表后，select2会把原来的select隐藏掉，设置css属性（display:none），然后再通过select2重新定制界面

2、但jquery.validate.js默认不是校验:hidden属性的控件，所以造成原来的select校验不了

官网说明：

ignore (default: ":hidden")

Type: Selector

Elements to ignore when validating, simply filtering them out. jQuery's not-method is used, therefore everything that is accepted by not() can be passed as this option. Inputs of type submit and reset are always ignored, so are disabled elements.

Example: Ignores all elements with the class "ignore" when validating.

$("#myform").validate({

ignore: ".ignore"

});

3、解决方法就是加ignore属性，把值设置为""空字符串

ignore: "",

4、设置ignore后在提交时就会对隐藏的属性进行校验，但选择的时候没有进行实时校验，因为你选择的是select2。所以要给select加一个change事件，当改变时，再校验一次。

/** 添加事件 */
$("#hobby").change(function(){
	$(this).valid();
});

需要注意的是：valid方法是jquery.validate.js中的方法，所以用的时候，要先调用初始化方法validate( ),

然后在后面再重新调用valid()校验方法。

valid( ) 可以校验整个表单，也可以校验单个属性。

官网说明：

valid( )

Returns: Boolean

Description: Checks whether the selected form is valid or whether all selected elements are valid.

validate() needs to be called on the form before checking it using this method.

项目中解决办法：

给select控件添加change事件：

//select2美化下拉框控件
$("#hobby").select2();
/** 添加事件 */
$("#hobby").change(function(){
	$(this).valid();
});

表单验证函数添加相应的代码即可：

$("#registerForm").validate({
	ignore: "",//添加ignore属性，会校验隐藏域的内容，setlet2下拉控件会替换原来的select(原来的select会隐藏)
	errorClass : 'error',
	focusInvalid : true,
	rules : {
		hobby : {
		    required : true
		}
	},
	messages : {
		hobby : {
			required : "请选择您的爱好"
		}
	},
	submitHandler:function(form){
		form.submit();
	}
});

解决后效果图：

源码（index3.html）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery.validate.js校验select2框架失效</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<!-- sdfdsf-->
		<link href="jquery-select2/3.4/select2.min.css" type="text/css" rel="stylesheet" />
		<style type="text/css">
		/** 
		 * 重新定义错误样式及图标
		 * 1、防止与bootstrap样式中的label冲突 （label: display: block）,导致label换行了
		 * 2、添加错误图标显示 
		 */	
		.requiedField{
			color: red;
		}
		label {
		    display: inline-block;
		    margin-bottom: 0;
		}	
		label.error {
		    background: url(./img/unchecked.gif) no-repeat 5px 3px;
		    padding-left: 24px;
		    color: #EA5200;
		}	
		
		</style>
	</head>
	<body>
		<fieldset >
			<legend>用户注册</legend>
		<form class="form-horizontal" id="registerForm" method="post" onsubmit="return false;">
			<div class="control-group">
				<label class="control-label">昵称</label>
				<div class="controls">
					<input type="text" class="{required:true}" name="nickname" placeholder="请填写昵称" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称2</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:2}" name="nickname2" placeholder="请填写昵称2" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">昵称3</label>
				<div class="controls">
					<input type="text" class="{required:true,maxlength:10}" name="nickname3" placeholder="请填写昵称3" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">用户名</label>
				<div class="controls">
					<input type="text" class="{required:true,username:true,minLength:6,maxlength:20}" name="username" placeholder="请填写用户名" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">密码</label>
				<div class="controls">
					<input type="text" class="{required:true,minlength:6,maxlength:20}" id="password" name="password" placeholder="请填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">确认密码</label>
				<div class="controls">
					<input type="text" class="{required:true,equalTo:'#password'}" name="confirmPassword" placeholder="请再次填写密码" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">手机号码</label>
				<div class="controls">
					<input type="text" class="{required:true,mobile:true}" name="mobile" placeholder="请填写手机号" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">email</label>
				<div class="controls">
					<input type="text" class="{required:true,email:true}" name="email" placeholder="请填写email" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">年龄</label>
				<div class="controls">
					<input type="text" class="{required:true,min: 18,max:100}" name="age" placeholder="请填写" />
					<label class="requiedField">*</label>
				</div>
			</div>
			<hr />
			以下是否使用了jquery select2框架美化select控件的效果
			<hr />
			<div class="control-group">
				<label class="control-label">职位(默认下拉框)</label>
				<div class="controls">
					<select name="position" id="position" class="{required:true}">
						<option value="">选择职位</option>
						<option value="1">程序员</option>
						<option value="2">销售员</option>
						<option value="3">服务员</option>
						<option value="4">工人</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">爱好(使用select2)</label>
				<div class="controls">
					<select name="hobby" id="hobby">
						<option value="">选择爱好</option>
						<option value="1">登山</option>
						<option value="2">游泳</option>
						<option value="3">音乐</option>
						<option value="4">读书</option>
						<option value="5">其他</option>
					</select>
					<label class="requiedField">*</label>
				</div>
			</div>
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary">保存</button>
				<button type="button" class="btn">重置</button>
			</div>
		</form>
		
		</fieldset>
		
		<script type="text/javascript" src="jquery/jquery-1.9.0.min.js" ></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/jquery.metadata.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.methods.js" ></script>
		<script type="text/javascript" src="js/jquery.validate.cn.js" ></script>
		<!-- 引入jquery select2 -->
		<script type="text/javascript" src="jquery-select2/3.4/select2.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#registerForm").validate({
					ignore: "",//添加ignore属性，会校验隐藏域的内容，setlet2下拉控件会替换原来的select(原来的select会隐藏)
					errorClass : 'error',
					focusInvalid : true,
					rules : {
						hobby : {
							required : true
						}
					},
					messages : {
						hobby : {
							required : "请选择您的爱好"
						}
					},
				  	submitHandler:function(form){
						form.submit();
					}
				});
				
				//select2美化下拉框控件
				$("#hobby").select2();
				/** 添加事件 */
				$("#hobby").change(function(){
			        $(this).valid();
			    });

			})	
		</script>
	</body>
</html>

源码已经打包到百度云盘，下载地址：

链接：https://pan.baidu.com/s/1-hrUKQf8m45H3oQWsbpgvQ
提取码：s1dl

部分内容参考下面这篇文章：

https://blog.csdn.net/hyb1234hi/article/details/51474126