javascript-引导程序3：具有表单验证功能的向导

我想用引导程序验证表单来创建向导.我使用http://vadimg.com/twitter-bootstrap-wizard-example/的Twitter Bootstrap向导插件.它使用jQuery Validate插件.

我的问题是单选按钮的验证不起作用.即使未选中任何单选按钮,我也可以跳过“标签”.

有谁知道我做错了什么？

这是我的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>

我的输入元素如下所示：

<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>

这里是网站的完整代码：
http://chopapp.com/#aj3u0kz1

提前致谢！

解决方法:

您已经在HTML标记中两次声明了必需的规则…

<input class="required" id="question21" name="question2" required="" type="radio"> 

1)按类：class =“ required”声明name =“ question2”单选按钮已根据需要设置.

2)通过HTML5属性：required =“”声明name =“ question2”单选按钮设置为不需要.

显然,jQuery Validation插件优先考虑HTML5属性.

您只需要使用一种声明规则的方法即可.使用class或HTML5属性,不能同时使用.如果决定保留HTML5属性,请使用required =“ required”.

编辑：

引用OP的评论：

“… But either class="required" or required="required" works

标签：twitter-bootstrap-3,jquery-validate,html,javascript,jquery
来源： https://codeday.me/bug/20191030/1965839.html