title: Twitter Bootstrap Form Wizard/Jquery.validate - prevent user from moving to next tab if form is not valid
body: <p>So far, i tried following:</p>
  
  <ol>
  <li>In <code>onNext</code> - first thing <code>if (!form.valid()) { return false; }</code> this still moved the user to following tab.</li>
  <li><p>In <code>onNext</code> - first thing:</p>
  
  <p>if (!form.valid()) {</p>
  
  <p>$('.error').first().focus()</p>
  
  <p>return false;</p>
  
  <p>}</p>
  
  <p>still, the wizard moved to next tab.</p></li>
  <li><p>`$('.button-next').click( function (e) {</p>
  
  <pre><code>  if (!form.valid()) {
  
      e.preventDefualt();
  
      return false;
     }
  
   return true;
  
  }`
  </code></pre></li>
  </ol>
  
  <p>and still no help.</p>
  
  <p>How can I prevent the user from moving to another tab if the form is not valid so far?</p>
  
  <p>Btw, the validation works ok - not valid fields are highlighted properly.</p>
  
  <p><strong>Update - Code</strong> <em>the onNext func</em></p>
  
  <pre><code>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 &lt; index; i++) {
                  jQuery(li_list[i]).addClass("done");
              }
  
              if (current == 1) {
                  form.find('.button-previous').hide();
              } else {
                  form.find('.button-previous').show();
              }
  
              if (current &gt;= 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'));
          },
  </code></pre>