Twitter Bootstrap Form Wizard/Jquery.validate - prevent user from moving to next tab if form is not valid

Question

So far, i tried following:

1. In onNext - first thing if (!form.valid()) { return false; } this still moved the user to following tab.

2. In onNext - first thing:

   if (!form.valid()) {

   $('.error').first().focus()

   return false;

   }

   still, the wizard moved to next tab.

3. `$('.button-next').click( function (e) {

     if (!form.valid()) {
   
       e.preventDefualt();
   
       return false;
      }
   
    return true;
   
   }`
   

and still no help.

How can I prevent the user from moving to another tab if the form is not valid so far?

Btw, the validation works ok - not valid fields are highlighted properly.

Update - Code the onNext func

onNext: function (tab, navigation, index) {
            console.log('in on next');

            if (!form.valid()) {
                console.log('not valid');
                $('.error').first().focus();
                return false;
            }

            var total = navigation.find('li').length;
            var current = index + 1;
            // set wizard title
            $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
            // set done steps
            jQuery('li', form).removeClass("done");
            var li_list = navigation.find('li');
            for (var i = 0; i < index; i++) {
                jQuery(li_list[i]).addClass("done");
            }

            if (current == 1) {
                form.find('.button-previous').hide();
            } else {
                form.find('.button-previous').show();
            }

            if (current >= total) {
                form.find('.button-next').hide();
                form.find('.button-submit').show();
            } else {
                form.find('.button-next').show();
                form.find('.button-submit').hide();
            }

            App.scrollTo($('.page-title'));
        },

Answer 1

My goal: stop the wizard from transferring to the next tab if any field in current step is not valid. Allow the user to fix all invalid fields and only then move on to the next step.

I changed the onNext function to following:

onNext: function (tab, navigation, index) {
            console.log('in on next');

            var allowStep = form.valid();

            if (allowStep) {

                var total = navigation.find('li').length;
                var current = index + 1;
                // set wizard title
                $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
                // set done steps
                jQuery('li', form).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current == 1) {
                    form.find('.button-previous').hide();
                } else {
                    form.find('.button-previous').show();
                }

                if (current >= total) {
                    form.find('.button-next').hide();
                    form.find('.button-submit').show();
                } else {
                    form.find('.button-next').show();
                    form.find('.button-submit').hide();
                }

                App.scrollTo($('.page-title'));
            }

            return allowStep;
        },

As of yet, I don't know why returning false from inside if statement didn't have same effect.

To make this work, stop the wizard form transferring the user forward, I had to put the return statement outside of any brackets.

Hope this will help others save hours of development it took me :)