title: Jquery Steps Wizard Select List Validation
body: <p>I am using a jQuery plugin called <a href="http://www.jquery-steps.com/" rel="nofollow">steps</a> to create a form wizard.
  Which can be used in conjunction with the jQuery <a href="http://jqueryvalidation.org/" rel="nofollow">validation</a> plug in.</p>
  
  <p>I need to be able to validate a select list before the user proceeds to the next set of options but I haven't found a way to do so yet.</p>
  
  <p>Heres my code so far. The HTML</p>
  
  <p></p>
  
  <pre><code>&lt;h2&gt;Engagement&lt;/h2&gt;
     &lt;div id = "pane1"&gt;
        &lt;div class = "panel panel-default"&gt;
          &lt;div class = "panel-heading"&gt;
            Engagement
             &lt;/div&gt;
               &lt;div class = "panel-body"&gt;
                 &lt;table class='table table-hover'&gt;
                  &lt;tr valign='top'&gt;&lt;td class='tableLabel'&gt;Request Type:&lt;/td&gt;&lt;td&gt;&lt;select onchange = "getType();"  id = "type" class="selectpicker required" name='type'&gt;
   &lt;?php
  foreach($types AS $key =&gt; $val){
      echo "&lt;option value='{$key}'&gt;{$val}&lt;/option&gt;"; 
     }
  ?&gt;
  &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;  
  &lt;tr valign='top'&gt;&lt;td class='tableLabel'&gt;Delivery Date:&lt;/td&gt;&lt;td&gt;&lt;input  id='deliveryDate' placeholder="Select a delivery date for your request"  class="form-control datePicker required" type='text' name='devlireyDate'&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt; 
   &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  
  
              &lt;h2&gt;Details&lt;/h2&gt;
  
              &lt;div id = "pane2"&gt;
  
              &lt;/div&gt;
           &lt;/form&gt;
  </code></pre>
  
  <p>The jQuery</p>
  
  <pre><code>$(function (){
       $("#engagementForm").steps({
       headerTag: "h2",
       bodyTag: "div",
       transitionEffect: "slideLeft",
       onStepChanging: function (event, currentIndex, newIndex)
      {
      // Always allow going backward even if the current step contains invalid fields!
      if (currentIndex &gt; newIndex)
      {
          return true;
      }
  
  
  
      var form = $(this);
  
      // Clean up if user went backward before
      if (currentIndex &lt; newIndex)
      {
          // To remove error styles
          $(".body:eq(" + newIndex + ") label.error", form).remove();
          $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
      }
  
      // Disable validation on fields that are disabled or hidden.
      form.validate().settings.ignore = ":disabled,:hidden";
  
      // Start validation; Prevent going forward if false
                  return form.valid();
              },
              onFinishing: function (event, currentIndex)
              {
                  var form = $(this);
  
                  // Disable validation on fields that are disabled.
                  // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                  form.validate().settings.ignore = ":disabled";
  
                  // Start validation; Prevent form submission if false
                  return form.valid();
              },
              onFinished: function (event, currentIndex)
              {
                  var form = $(this);
  
                  // Submit form input
                  form.submit();
              }
          });
  
                   $('.selectpicker').selectpicker();
                   $(".datePicker").datepicker({ dateFormat: 'yy-mm-dd' , minDate: "+1d" });
              });
  </code></pre>
  
  <p>The delivery date validates simply by puttint 'required' as a class but this does not work for the select list sadly.</p>