title: jQuery Steps stop next step if the input is not valid
body: <p>I have a simple form with jquery steps and jquery validate.</p>
  
  <p>I have a lot of field with specific format (example: only accepting one of these numbers  <code>/^(6|8|10|12)$/)</code>.</p>
  
  <p>I'm using regex to check input format so that user know there is something wrong. For the moment, the wrong format just take the red color but by pressing next, the user can go to the next step.</p>
  
  <p>Now I want to forbid next step if the input is not on the right format.</p>
  
  <p>Here is the pen to illustrate the form <a href="https://codepen.io/zounars/pen/MZYxKB" rel="nofollow noreferrer">https://codepen.io/zounars/pen/MZYxKB</a></p>
  
  <pre><code>&lt;!-- Thanks to Pieter B. for helping out with the logistics --&gt;
  &lt;div class="container"&gt;
  &lt;form id="contact" action="#"&gt;
  &lt;div&gt;
      &lt;h3&gt;Account&lt;/h3&gt;
      &lt;section&gt;
          &lt;label for="userName"&gt;User name *&lt;/label&gt;
          &lt;input id="userName" name="userName" type="text" class="required"&gt;
          &lt;label for="specialNumber"&gt;Special number *&lt;/label&gt;
          &lt;input id="specialNumber" name="specialNumber" type="text" class="required"&gt;
          &lt;p&gt;(*) Mandatory&lt;/p&gt;
      &lt;/section&gt;
  
      &lt;h3&gt;Profile&lt;/h3&gt;
      &lt;section&gt;
          &lt;label for="name"&gt;First name *&lt;/label&gt;
          &lt;input id="name" name="name" type="text" class="required"&gt;
          &lt;label for="surname"&gt;Last name *&lt;/label&gt;
          &lt;input id="surname" name="surname" type="text" class="required"&gt;
          &lt;p&gt;(*) Mandatory&lt;/p&gt;
      &lt;/section&gt;
      &lt;h3&gt;Hints&lt;/h3&gt;
      &lt;section&gt;
          &lt;ul&gt;
              &lt;li&gt;Foo&lt;/li&gt;
              &lt;li&gt;Bar&lt;/li&gt;
              &lt;li&gt;Foobar&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
      &lt;h3&gt;Finish&lt;/h3&gt;
      &lt;section&gt;
          &lt;input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"&gt; &lt;label for="acceptTerms"&gt;I agree with the Terms and Conditions.&lt;/label&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>var form = $("#contact");
  form.validate({
  errorPlacement: function errorPlacement(error, element) { element.before(error); },
  rules: {
      confirm: {
          equalTo: "#password"
      }
  }
  });
  form.children("div").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  onStepChanging: function (event, currentIndex, newIndex)
  {
  
      form.validate().settings.ignore = ":disabled,:hidden";
      return form.valid();
  
  },
  onFinishing: function (event, currentIndex)
  {
      form.validate().settings.ignore = ":disabled";
      return form.valid();
  },
  onFinished: function (event, currentIndex)
  {
      alert("Submitted!");
  }
  });
  
  $('#specialNumber').on('keyup', function (e) {
      if (!this.value.match(/^(6|8|10|12)$/)) {       
          $(this).addClass('error-color'); // adding error class
      } else {
          $(this).removeClass('error-color'); // remove error class
      }
  });
  </code></pre>