twitter bootstrap validation with bootstrap-wizard onNext

Question

I have a form loaded in multiple twitter-wizard tabs whic i need to validate the current tab before moving to the next with 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;
    }
 }

I get this error

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

what am i doing wrong?

score 1 · Answer 1 · answered Nov 16 '14 at 16:01

try this

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

score 0 · Accepted Answer · answered Oct 31 '14 at 12:02

After much searching, i found another way to do it

$('#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 ;

    }

I hope this would be useful to anyone

score 0 · Answer 3 · answered Aug 04 '21 at 11:20

I hope this will work too![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;
              }
        }
    });

twitter bootstrap validation with bootstrap-wizard onNext

3 Answers3