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

Question

我在多个 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

我究竟做错了什么？

Answer 1

尝试这个

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

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

    }

我希望这对任何人都有用

Answer 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;
              }
        }
    });