单选框美化后bootstrapvalidator验证（radio）

最新推荐文章于 2023-10-13 16:21:50 发布

舒翰

最新推荐文章于 2023-10-13 16:21:50 发布

阅读量864

点赞数

分类专栏：前端文章标签： html css bootstrap

本文链接：https://blog.csdn.net/qq_43128330/article/details/115422441

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

昨天在调试代码的时候发现了关于bootstrapValidator对单选框美化后的一个验证。

这里我使用了验证，但是没有显示出来，前提是我没有点击radio的单选框，如果点击后它是可以出来的，例如下图：

但是不点击radio为什么不能显示呢？
然后我就去百度了一下，有说因为如果使用js去改变radio的checked的值，可能bootstrapValidator检测不到radio的改变，总而言之就是后者太快了的意思。（如果有其他解释的可以说一下，本人实属辣鸡）
然后我就挨个去试试代码，找到了一个一个可以解决的方案。废话不多说，上代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>姓名【复制】</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css"/>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
		<!--script代码行-->
		
		
		<!--jquery-->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<!--bootstrap-->
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--bootstrapValidator.js-->
		<script type="text/javascript" src="js/bootstrapValidator.js" ></script>
	</head>
	<body>
		<!--表单情况-->
		<form method="post" action="/success" id="form10001">
		<!--性别-->
			<div class="form-group div2">
				<label class="title control-label" for="div2"><span class="important">*</span>你的性别：</label>
				<div class="col-12 tow-column">
					<div class="ui-radio radio">
						<input type="radio" name="div2" value="1" />
						<span class="radio-text">男</span>
					</div>
					<div class="ui-radio radio" id="div2-2">
						<input type="radio" name="div2" value="2" />
						<span class="radio-text" >女</span>
					</div>
				</div>
			</div>
		</form>
		
		<script>
			
				//选中状态
			$(".ui-radio").click(function(){
//				$("#man").attr("checked","true")
//				这里特别要注意一点prop和attr的区别
//				通过prop选择返回的则是true和false值
				//但是attr则不同，则是初始化一个值
				$(this).find("input").prop("checked","checked")
				$(this).find("input").change()
//				alert($(this).find("input:radio[name='div2'][value='2']").change())
//				alert($(this).find("input:radio[name='div2'][value='1']").change())
			});
			
			$("#form10001").bootstrapValidator({
				excluded:[":disabled"],
				live: 'enabled',
				message: 'This value is not valid',
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				fields:{
					div2:{
	//					trigger:'change',
						validators: {
							notEmpty: {
								message: '请选择选项'
							}
						}
					}
				}
			});
		</script>	
	</body>
</html>

index.css

{
	margin: 0;
	padding: 0;
}
body{
}
.title{
	font-weight: 700;
}
.important{
	color: red;
}
.tow-column{
	display: flex;
	flex-wrap: wrap;
}
.ui-radio{
	width: 100%;
	border: 1px solid #e4e4e4;
	padding: 10px 20px;
}
.ui-radio:hover{
	background-color: #e4e4e4;
}
.radio-text{
	font-size: 18px;
	
}
.tow-column .ui-radio{
	width: 50%;
}

具体情况就这么解决了，查了两天，不希望后来的人和我一样查得好烦。

舒翰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选框美化后bootstrapvalidator验证（radio）

昨天在调试代码的时候发现了关于bootstrapValidator对单选框美化后的一个验证。这里我使用了验证，但是没有显示出来，前提是我没有点击radio的单选框，如果点击后它是可以出来的，例如下图：但是不点击radio为什么不能显示呢？然后我就去百度了一下，有说因为如果使用js去改变radio的checked的值，可能bootstrapValidator检测不到radio的改变，总而言之就是后者太快了的意思。（如果有其他解释的可以说一下，本人实属辣鸡）然后我就挨个去试试代码，找到了一个一个可.
复制链接

扫一扫