Bootstrap表单验证无效 [英] Bootstrap form validation not working
问题描述
我正在尝试使用bootstrap验证器来验证用户名和密码字段
我已经为bootstrap验证器包含了css和js。要验证的
表单ID是 #login
I am trying to validate username and password field using bootstrap validator
I have included css and js for bootstrap validator.
form id to validate is #login
代码如下
<head>
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="js/bootstrap-3.1.1-dist/css/bootstrap-theme.min.css"/>
<script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/js/bootstrapValidator.min.js"></script>
<script type='text/javascript' src="js/bootstrapvalidator-dist-0.4.5/dist/css/bootstrapValidator.min.css"></script>
<script>
$(document).ready(function() {
$('#login').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: 'User Name required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'TPassword required'
}
}
}
}
});
});</script>
</head>
<body>
<form action="login" method="post" id="login" >
<div class="form-group">
<label class="control-label" for="userName">
User Id
</label>
<input type="text" placeholder="Username" name="userName" id="userName" class="form-control lgn">
</div>
<div class="form-group">
<label class="control-label" for="Password">
Password
</label>
<input type="password" placeholder="Password" name="password" id="password" class="form-control lgn">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success lgn" >Login</button>
</div>
</form>
</body>
如何解决此问题。
小提琴demo jsfiddle.net/xrcwrn/3bthv
fiddle demo jsfiddle.net/xrcwrn/3bthv
推荐答案
问题是你的小提琴包含的js代码包含语法错误。当你的javascript没有按预期工作时，控制台应该是你检查的第一件事。我在下面的代码中评论了我为使小提琴工作所做的改变。 （看起来你问题中的代码很好）
The problem was that your js code contained in the fiddle contained syntax errors. The console should be the first thing you check when your javascript isn't working as expected. I commented in the code below what changes I made to get the fiddle to work. (It looks like the code in your question is fine though)
$(document).ready(function() {
$('#login').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: 'The first name is required and cannot be empty'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The last name is required and cannot be empty'
}
}
} /* <-- removed unneeded comma */
} /* <-- added closing brace */
});
});
这篇关于Bootstrap表单验证无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
