引导程序3:具有表单验证的向导

Bootstrap 3: wizard with form validation

本文关键字：验证 向导 表单 引导程序      更新时间：2023-09-26

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

我现在的问题是验证单选按钮不起作用。即使没有选中单选按钮，我也可以跳过"选项卡"。

有人知道我做错了什么吗？

这是我的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标记中声明了两次required规则。。。

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

1） 按类别：class="required"正在声明name="question2"单选按钮设置为必需。

2） 根据HTML5属性：required=""正在声明name="question2"单选按钮集为不需要的。

显然，jQueryValidation插件优先考虑HTML5属性。

您只需要使用一种方法来声明规则。使用class或HTML5属性，而不是两者都使用。如果您决定保留HTML5属性，则使用required="required"。

编辑：

引用OP的评论：

"…但是class="required"或required="required"都有效：-（你有其他想法吗？"

你的意思是说那些作品"都没有"吗？这两种方法都非常好，还有另一种方法。。。

class="required"声明的规则：http://jsfiddle.net/MHWmx/

required="required"声明的规则：http://jsfiddle.net/MHWmx/1/

在.validate()中声明的规则：http://jsfiddle.net/MHWmx/2/

否则，您未显示的代码中就会出现问题。

相关文章：