javascript Bootstrap 3：带有表单验证的向导
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20124133/
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 3: wizard with form validation
提问by Max
I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from http://vadimg.com/twitter-bootstrap-wizard-example/. It uses jQuery Validate Plugin.
我想用引导程序创建一个带有表单验证的向导。我使用来自http://vadimg.com/twitter-bootstrap-wizard-example/的 Twitter Bootstrap 向导插件。它使用 jQuery 验证插件。
My problem is now that the validation of radio buttons does not work. I can skip through the "tabs" even if no radio button is checked.
我的问题是现在单选按钮的验证不起作用。即使没有选中单选按钮，我也可以跳过“标签”。
Has anyone an idea what I've made wrong?
有谁知道我做错了什么？
This is my Javascript-Code:
这是我的 Javascript 代码：
<script>
$(document).ready(function() {
var $validator = $("#commentForm").validate();
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
});
window.prettyPrint && prettyPrint()
});
</script>
My input elements look like this here:
我的输入元素在这里看起来像这样：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="required" id="question21" name="question2" required="" type="radio"> 1</label>
<label class="btn btn-primary">
<input id="question22" name="question2" type="radio"> 2</label>
<label class="btn btn-primary">
<input id="question23" name="question2" type="radio"> 3</label>
<label class="btn btn-primary">
<input id="question24" name="question2" type="radio"> 4</label>
<label class="btn btn-primary">
<input id="question25" name="question2" type="radio"> 5</label></div>
Here the entire code of the site:http://chopapp.com/#aj3u0kz1
这里是网站的全部代码：http : //chopapp.com/#aj3u0kz1
Thanks in advance!
提前致谢！
回答by Sparky
You've declared the requiredrule twice in your HTML markup...
您已经required在 HTML 标记中两次声明了规则...
<input class="required" id="question21" name="question2" required="" type="radio">
1) By class:class="required"is declaring the name="question2"radio button set as required.
1） 按类：根据需要class="required"声明name="question2"单选按钮设置。
2) By HTML5 attribute:required=""is declaring the name="question2"radio button set as not required.
2) 通过 HTML5 属性：required=""将name="question2"单选按钮设置为不需要。
Apparently the jQuery Validation plugin gives precedence to the HTML5 attribute.
显然 jQuery 验证插件优先考虑 HTML5 属性。
You only need to use one method of declaring the rule. Use classor HTML5 attribute, not both. If you decide to keep the HTML5 attribute, then use required="required".
您只需要使用一种方法来声明规则。使用class或 HTML5 属性，不能同时使用。如果您决定保留 HTML5 属性，请使用required="required".
EDIT:
编辑：
Quote OP's Comment:
引用 OP 的评论：
"... But either
class="required"orrequired="required"works :-( Do you have another idea?"
“......但无论是
class="required"或required="required"作品:-(你有其他的想法？”
Did you mean to say "neither"of those works? Both of those work perfectly fine, as well as another method...
你的意思是说“都不是”这些作品吗？这两种方法都很好，还有另一种方法......
Rule declared by class="required": http://jsfiddle.net/MHWmx/
规则声明者class="required"：http: //jsfiddle.net/MHWmx/
Rule declared by required="required": http://jsfiddle.net/MHWmx/1/
规则声明者required="required"：http: //jsfiddle.net/MHWmx/1/
Rule declared within .validate(): http://jsfiddle.net/MHWmx/2/
内声明的规则.validate()：http: //jsfiddle.net/MHWmx/2/
Otherwise, there's a problem in code you have not shown.
否则，您未显示的代码中存在问题。
