title: Validation not working on jquery.steps with more than one select2 select input
body: <p>I have the following HTML code to create a jquery.step-like wizard which includes 3 select2 input controls:</p>
  
  <pre><code>&lt;form id="form" action="#" &gt;
         &lt;h1&gt;Data Package source information&lt;/h1&gt;
         &lt;fieldset&gt;
              &lt;h2&gt;Specify the details of the new Data Package&lt;/h2&gt;
              &lt;div class="row"&gt;
                   &lt;div class="col-lg-8" id="importFileData"&gt;
                        &lt;div class="form-group"&gt;
                             &lt;label&gt;Customer *&lt;/label&gt;
                             &lt;select class="form-control required" id="selectCustomer" data-bind="options: customers, optionsText: 'Name', optionsValue: 'Id'"&gt;&lt;/select&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                             &lt;label&gt;System type *&lt;/label&gt;
                             &lt;select class="form-control required" id="selectSystem" data-bind="options: systems, optionsText: 'Name', optionsValue: 'TypeId'"&gt;&lt;/select&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                              &lt;label&gt;Select the instrument where the data package comes from *&lt;/label&gt;
                              &lt;select class="form-control required" id="selectInstrument" data-bind="options: instruments, optionsText: 'SerialNumber', optionsValue: 'SerialNumber'"&gt;&lt;/select&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                              &lt;label class="font-noraml"&gt;Select the date of import (by default today)&lt;/label&gt;
                              &lt;div class="input-group date"&gt;
                                   &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input id="importDate" type="text" class="form-control" value="@DateTime.Now.ToString("d")"&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                   &lt;/div&gt;
                   &lt;div class="col-lg-4"&gt;
                        &lt;div class="text-center"&gt;
                              &lt;div style="margin-top: 20px"&gt;
                                    &lt;i class="fa fa-sign-in" style="font-size: 180px; color: #e5e5e5"&gt;&lt;/i&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
        &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here the Javascript:</p>
  
  <pre><code> $("#form")
              .steps({
                  bodyTag: "fieldset",
                  onStepChanging: function (event, currentIndex, newIndex) {
                      var form = $(this);
                      // Always allow going backward even if the current step contains invalid fields!
                      if (currentIndex &gt; newIndex) {
                          return true;
                      }
  
                      form.validate();
  
                      // Start validation; Prevent going forward if false
                      return form.valid();
                  },
                  onStepChanged: function (event, currentIndex, priorIndex) {
  
                  },
                  onFinishing: function (event, currentIndex) {
                      var form = $(this);
                      form.validate();
                      // Start validation; Prevent form submission if false
                      return form.valid();
                  },
                  onFinished: function (event, currentIndex) {
                      var form = $(this);
  
                      // Submit form input
                      form.submit();
                  }
              })
              .validate({
                  errorPlacement: function (error, element) {
                      element.before(error);
                  }
              });
  
          $("#selectCustomer")
              .select2({
                  placeholder: "Select a customer",
                  allowClear: true
              })
              .on("change",
                  function (e) {
                      var selectedCustomerId = $("#selectCustomer").val();
  
                      $.ajax({
                          url: self.getValidUrl() + "/api/DataPackageManagementApi/Systems/" + selectedCustomerId,
                          async: true,
                          type: "GET",
                          success: function (results) {
                              self.importDataPackageViewModel.systems.removeAll();
                              self.importDataPackageViewModel.systems.push("");
  
                              $.each(results,
                                  function (key, item) {
                                      self.importDataPackageViewModel.systems.push(item);
                                  });
  
                              $("#selectSystem").prop("disabled", false);
                          },
                          error: function (jqXhr, textStatus, errorThrown) {
                              console.log(JSON.stringify(jqXhr));
                              console.log("AJAX error: " + textStatus + " : " + errorThrown);
                          }
                      });
                  });
  
          $("#selectSystem")
              .select2({
                  placeholder: "Select a system",
                  allowClear: true,
                  disabled: true
              })
              .on("change",
                  function (e) {
                      var selectedCustomerId = $("#selectCustomer").val();
                      var selectedSystemId = $("#selectSystem").val();
                      $.ajax({
                          url: self.getValidUrl() + "/api/DataPackageManagementApi/Instruments/" +selectedCustomerId +"/" +selectedSystemId,
                          async: true,
                          type: "GET",
                          success: function (results) {
                              self.importDataPackageViewModel.instruments.removeAll();
                              self.importDataPackageViewModel.instruments.push("");
  
                              $.each(results,
                                  function (key, item) {
                                      self.importDataPackageViewModel.instruments.push(item);
                                  });
  
                              $("#selectInstrument").prop("disabled", false);
                          },
                          error: function (jqXhr, textStatus, errorThrown) {
                              console.log(JSON.stringify(jqXhr));
                              console.log("AJAX error: " + textStatus + " : " + errorThrown);
                          }
                      });
                  });
  
          $("#selectInstrument")
              .select2({
                  placeholder: "Select a Instrument",
                  allowClear: true,
                  disabled: true
              });
  </code></pre>
  
  <p>My problem are two:</p>
  
  <ol>
  <li>The validation of the form only validates the first select2 input control, never the second nor the third.</li>
  <li>The style of the select2 validation error does not match with the rest of the validation controls.</li>
  </ol>
  
  <p>Does anyone know what am I doing wrong? I've searched both jquery.validation and select2 documentation and examples and to me it looks like I'm doing it correctly, but obviously there is a mistake somewhere.</p>
  
  <p>Many thanks in advance!</p>
  
  <p>Regards,</p>
  
  <p>Javier</p>