javascript Bootstrap 表单验证不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24972949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap form validation not working
提问by xrcwrn
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
我正在尝试使用引导程序验证器验证用户名和密码字段 我已经为引导程序验证器包含了 css 和 js。要验证的表单 ID 是#login
Code is as below
代码如下
<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>
How to resolve this.
如何解决这个问题。
fiddle demo jsfiddle.net/xrcwrn/3bthv
小提琴演示 jsfiddle.net/xrcwrn/3bthv
回答by dmullings
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)
问题是小提琴中包含的 js 代码包含语法错误。当您的 javascript 没有按预期工作时，控制台应该是您检查的第一件事。我在下面的代码中评论了我为使小提琴正常工作所做的更改。（不过看起来您问题中的代码很好）
$(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 */
});
});
