JSFiddle - React, Tailwind, and code Playground

by David DeLella

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<div style="padding: 15px;">
  <form name="MyForm" method="post" novalidate>
    <div class="container-fluid">
      <div class="form-row mb-3">
        <div class="col-md">
          <select id="StateProvince" name="StateProvince" data-width="100%">
            <option value="">Please Select</option>
            <option value="US-AL">Alabama</option>
            <option value="US-AK">Alaska</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="col-md text-center">
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

JavaScript

$(document).ready(function() {
  // Set the default version of bootstrap-select to 4.x
  $.fn.selectpicker.Constructor.BootstrapVersion = '4';

  // Add the form-control class to every select list and remove the button class
  $('select').selectpicker({
    style: 'form-control'
  });
  $('select + button').removeClass('btn');

  // Replace the standard MVC ValidationMessageFor HTML with Bootstrap validation
  $('span.field-validation-error').replaceWith(function() {
    return $('<div/>', {
      class: 'invalid-feedback ml-3',
      style: 'display: block;',
      html: this.innerHTML
    });
  });
});

$.validator.setDefaults({
  ignore: ":not(select:hidden, input:visible, textarea:visible)",
  validClass: 'is-valid',
  errorElement: 'div',
  errorClass: 'is-invalid',
  errorPlacement: function(error, element) {
    error.appendTo(element.closest("div.form-group")).addClass("invalid-feedback error-margin");
  },
  submitHandler: function(form) {
    form.submit();
  }
});

$("form[name='MyForm']").validate({
  rules: {
    StateProvince: {
      required: true
    }
  },
  messages: {
    StateProvince: {
      required: "State / Province is required"
    }
  }
});