使用 bootstrap-wizard onNext 进行 twitter 引导验证答案

【问题标题】：twitter bootstrap validation with bootstrap-wizard onNext使用 bootstrap-wizard onNext 进行 twitter 引导验证
【发布时间】：2014-12-27 15:08:03
【问题描述】：

我在多个 twitter-wizard 选项卡中加载了一个表单，我需要在使用 BootstrapValidator 移动到下一个选项卡之前验证当前选项卡

'onNext': function(tab, nav, index) {
     var $validator=$('#staffForm').bootstrapValidator(options).bootstrapValidator('validate');
    var $valid = $("#staffForm").valid(); <-- this is line 177, the error line
    if(!$valid) {
      $validator.focusInvalid();
         return false;
    }
 }

我收到此错误

Uncaught TypeError: undefined is not a function VM7348:177
$.bootstrapWizard.onNext VM7348:177

我做错了什么？

【问题讨论】：

标签： jquery twitter-bootstrap twitter jqbootstrapvalidation twitter-bootstrap-wizard

【解决方案1】：

试试这个

'onNext': function(tab, navigation, index) {
                                    var $validator = $('#YOURFORM').data('bootstrapValidator').validate();
                                    return $validator.isValid();
                            }

【讨论】：

【解决方案2】：

经过大量搜索，我找到了另一种方法

$('#wizard').bootstrapWizard({onNext: function(tab, navigation, index) {
        $valid = true;
        $newUser = $('#newUser').data('bootstrapValidator'); //the validator
        $wizard = $('#wizard').data('bootstrapWizard'); //the wizard

        $tab = $('#wizard').find('.tab-content').children().eq($wizard.currentIndex())
        $tab.find('input:text, input:password, input:file, select, textarea, input:not([type=hidden])')
            .each(function() {
                if ($newUser.options.fields[$(this).attr('name')]) {
                    $newUser.validateField($(this).attr('name'));
                    if ($(this).closest('.form-group').hasClass('has-error')){
                        $valid = false;
                        }
                    }
            });
        return $valid ;

    }

希望对大家有用

【讨论】：

【解决方案3】：

我希望这也能工作！[bootstrap 4]

$('#rootwizard').bootstrapWizard({
        onNext: function (tab, navigation, index) {
            var form = $($(tab).data("targetForm"));
            if (form) {
                form.addClass('was-validated');
                if (form[0].checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                }
            }
        },
        onTabClick: function(activeTab, navigation, currentIndex, nextIndex) {
            if (nextIndex <= currentIndex) {
                return;
              }
              var form = $($(activeTab).data("targetForm"));
            if (form) {
                form.addClass('was-validated');
                if (form[0].checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                }
            }
            if (nextIndex > currentIndex+1){
               return false;
              }
        }
    });

【讨论】：