title: Adding class to selectpicker dropdown on Submit
body: <p>I'm trying to make the dropdown here have the added/removed class (<code>input-validation-error</code>) added to <code>&lt;div class="btn-group bootstrap-select required"</code> when "Continue" is clicked, vs only when the dropdown selection is changed.</p>
  
  <p>The <code>input-validation-error</code> class would have a red border on "Continue" click, to show the user that they need to select from the dropdown. I'm using <a href="https://silviomoreto.github.io/bootstrap-select/" rel="nofollow">selectpicker</a> to restyle the Bootstrap dropdowns, and <a href="https://jqueryvalidation.org/" rel="nofollow">jquery validate</a> for the validation.</p>
  
  <pre><code>.input-validation-error button {
      border: 1px solid red;
  }
  
  &lt;select name="country" id="country" class="required selectpicker"&gt;
        &lt;option value=""&gt;Select Country&lt;/option&gt;
        &lt;option value="Afghanistan"&gt;Afghanistan&lt;/option&gt;
        [...]
  &lt;/select&gt;
  
  
  $(function () {
    $('select[name^="country"]').change(function () {
      var selValue = $(this).val();
      $("#form-jsvalidate").validate().element(this);
      if (selValue.length &gt; 0) {
        $(this).next('div').removeClass("input-validation-error");
      }
      else {
        $(this).next('div').addClass("input-validation-error");
      }
    });
  });
  </code></pre>
  
  <p>I believe it should be something like <code>$('.btn-submit-val').on('click', function() { var selValue = $('select[name^="country"]').val();</code> but obviously not since that and everything else I've tried isn't working. Any point in the right direction is much appreciated.</p>
  
  <p><a href="https://jsfiddle.net/DTcHh/25795/" rel="nofollow">https://jsfiddle.net/DTcHh/25795/</a></p>
  
  <p>Edit: Anyone?</p>