title: How to add Bootstrap 4 validation design into select2
body: <p>We need to design the select2 enabled fields according to the <a href="https://getbootstrap.com/docs/4.3/components/forms/#validation" rel="nofollow noreferrer">Bootstrap 4 default javascript validation API</a>. We tried to assign necessary classes to the select2 <code>containerCssClass</code> like below:</p>
  
  <pre><code>let forms = document.getElementsByClassName('needs-validation');
  Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
          $('.form-control.select2:invalid').select2({
              containerCssClass: 'form-control is-invalid border-danger'
          });
          $('.form-control.select2:valid').select2({
              containerCssClass: 'form-control is-valid border-success'
          });
      }, false);
  });
  </code></pre>
  
  <p>But it's always is showing the invalid styling even the field is filled with valid data. How can we solve this?</p>