jQuery 引导验证不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24529594/
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 validation not working
提问by xrcwrn
I am trying to use validation using bootstrap. I tried solution as herebut its not working.
我正在尝试使用bootstrap进行验证。我在这里尝试了解决方案，但它不起作用。
<form id="tryitForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="firstName" />
</div>
<div class="col-md-4">
<input type="text" class="form-control" name="lastName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Gender</label>
<div class="col-md-6">
<div class="radio">
<label><input type="radio" name="gender" value="male" /> Male</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="female" /> Female</label>
</div>
<div class="radio">
<label><input type="radio" name="gender" value="other" /> Other</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn btn-primary">Say hello</button>
</div>
</div>
</form>
I have added proper js files please see fiddle link. Kindly help to know what is the problem.
我已经添加了适当的 js 文件，请参阅小提琴链接。请帮助知道是什么问题。
回答by dmullings
This is a working jsfiddle: http://jsfiddle.net/P28nR/1/
这是一个有效的 jsfiddle：http: //jsfiddle.net/P28nR/1/
The things that were missing or incorrect were:
遗漏或不正确的内容是：
- You didn't include jquery
- You included the wrong jquery bootstrap plugin. The correct files can be found at the links below:
- 你没有包含 jquery
- 您包含了错误的 jquery bootstrap 插件。可以在以下链接中找到正确的文件：
//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js
//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css //cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator .min.js
You didn't add the javascript to configure and run the validator plugin
$(document).ready(function() { $('#tryitForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { firstName: { validators: { notEmpty: { message: 'The first name is required and cannot be empty' } } }, lastName: { validators: { notEmpty: { message: 'The last name is required and cannot be empty' } } }, email: { validators: { notEmpty: { message: 'The email address is required' }, emailAddress: { message: 'The input is not a valid email address' } } }, gender: { validators: { notEmpty: { message: 'The gender is required' } } } }, submitHandler: function(validator, form, submitButton) { var fullName = [validator.getFieldElements('firstName').val(), validator.getFieldElements('lastName').val()].join(' '); alert('Hello ' + fullName); } }); });
您没有添加 javascript 来配置和运行验证器插件
$(document).ready(function() { $('#tryitForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { firstName: { validators: { notEmpty: { message: 'The first name is required and cannot be empty' } } }, lastName: { validators: { notEmpty: { message: 'The last name is required and cannot be empty' } } }, email: { validators: { notEmpty: { message: 'The email address is required' }, emailAddress: { message: 'The input is not a valid email address' } } }, gender: { validators: { notEmpty: { message: 'The gender is required' } } } }, submitHandler: function(validator, form, submitButton) { var fullName = [validator.getFieldElements('firstName').val(), validator.getFieldElements('lastName').val()].join(' '); alert('Hello ' + fullName); } }); });
回答by gronostaj
You don't have jQuery included. Bootstrap plugins require jQuery.
You have jqBootstrapValidation included twice: first the human-readable version, then the minified one. Include only the minified version.
Order is important when loading external JS libraries. Load jQuery first, then Bootstrap scripts, then any additional plugins. JS is executed from top to bottom, so dependencies have to be loaded before scripts.
您没有包含 jQuery。Bootstrap 插件需要 jQuery。
您将 jqBootstrapValidation 包含两次：首先是人类可读的版本，然后是缩小的版本。仅包括缩小版本。
加载外部 JS 库时顺序很重要。首先加载 jQuery，然后是 Bootstrap 脚本，然后是任何其他插件。JS 是从上到下执行的，所以依赖必须在脚本之前加载。
