Question

58

Bootstrap and Select2 form validation

rated 0 times [ 64] [ 6] / answers: 1 / hits: 15405 / 5 Years ago, mon, february 4, 2019, 12:00:00

Explanation

I'm trying to use Bootstrap's form validation with Select2's select boxes, but for some reason, it doesn't work properly. It does show this feedback text, but not the green/red border color, as you can see in the code below.

Codes

You can also see it in this JSFiddle.

$(.select).select2({

  minimumResultsForSearch: Infinity

});

<link href=https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css rel=stylesheet />

<link href=https://rawgit.com/select2/select2/master/dist/css/select2.min.css rel=stylesheet />

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js></script>

<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js></script>

<script src=https://rawgit.com/select2/select2/master/dist/js/select2.js></script>

<form class=was-validated>



  <div class=form-group>

    <select class=custom-select required>

      <option value=>Open this select menu</option>

      <option value=1>One</option>

      <option value=2>Two</option>

      <option value=3>Three</option>

    </select>

    <div class=invalid-feedback>Example invalid custom select feedback</div>

  </div>



  <div class=form-group>

    <select class=select custom-select required>

      <option value=>Open this select menu</option>

      <option value=1>One</option>

      <option value=2>Two</option>

      <option value=3>Three</option>

    </select>

    <div class=invalid-feedback>Example invalid custom select feedback</div>

  </div>



</form>

Thanks in advance,

Luiz.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Webpack processAssets hook and asset source

Sat, Jan 2, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

View All

answered 5 Years ago jerome · Accepted Answer

You need to apply css for override and select2 generate dynamic select so

.was-validated .custom-select:invalid + .select2 .select2-selection{

    border-color: #dc3545!important;

}

.was-validated .custom-select:valid + .select2 .select2-selection{

    border-color: #28a745!important;

}

*:focus{

  outline:0px;

}

$(.select).select2({

  minimumResultsForSearch: Infinity

});

.was-validated .custom-select:invalid + .select2 .select2-selection{

    border-color: #dc3545!important;

}

.was-validated .custom-select:valid + .select2 .select2-selection{

    border-color: #28a745!important;

}

*:focus{

  outline:0px;

}

<link href=https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css rel=stylesheet />

<link href=https://rawgit.com/select2/select2/master/dist/css/select2.min.css rel=stylesheet />

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js></script>

<script src=https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js></script>

<script src=https://rawgit.com/select2/select2/master/dist/js/select2.js></script>

<form class=was-validated>



  <div class=form-group>

    <select class=custom-select required>

      <option value=>Open this select menu</option>

      <option value=1>One</option>

      <option value=2>Two</option>

      <option value=3>Three</option>

    </select>

    <div class=invalid-feedback>Example invalid custom select feedback</div>

  </div>



  <div class=form-group>

    <select class=select custom-select required>

      <option value=>Open this select menu</option>

      <option value=1>One</option>

      <option value=2>Two</option>

      <option value=3>Three</option>

    </select>

    <div class=invalid-feedback>Example invalid custom select feedback</div>

  </div>



</form>