Bootstrap 和 Select2 表單驗證

Question

解釋

我正在嘗試將Bootstrap 的表單驗證與Select2 的選擇框一起使用，但由於某種原因，它無法正常工作。 它確實顯示了此反饋文本，但不顯示綠色/紅色邊框顏色，如下面的代碼所示。

代碼

你也可以在這個 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>

提前致謝，
路易斯。

Answer 1

您需要應用css進行覆蓋和select2生成動態選擇所以

.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>

Answer 2

嘗試這個

 $(".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="form-control select2" 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="form-control select2" 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>

Answer 3

我今天遇到了同樣的問題，我僅使用 CSS 向 Select2 添加了驗證樣式 - 很像 Hiren 的回答。

我的回答的好處是，當您使用“is-valid”和“is-invalid”類（在進行服務器端驗證時可能會使用）時，它也會應用樣式。 我的 CSS 還添加了勾號和十字圖標以與 Bootstrap 驗證樣式的其余部分保持一致。

只需將以下內容添加到您的 CSS 文件中：

.was-validated select.select2:invalid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-invalid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #fa5c7c;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fa5c7c' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23fa5c7c' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:invalid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-invalid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-valid + .select2.select2-container.select2-container--default span.select2-selection {
    border-color: #0acf97;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230acf97' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated select.select2:valid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-valid + .select2.select2-container.select2-container--default .select2-selection__arrow {
    right: 25px!important;
}

這是一個演示：

 $('.select2').select2(); $(".needs-validation").on('submit', function (event) { $(this).addClass('was-validated'); if ($(this)[0].checkValidity() === false) { event.preventDefault(); event.stopPropagation(); return false; } else { alert('form submitted'); event.preventDefault(); event.stopPropagation(); return true; }; });

 .was-validated select.select2:invalid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-invalid + .select2.select2-container.select2-container--default span.select2-selection { border-color: #fa5c7c; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fa5c7c' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23fa5c7c' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated select.select2:invalid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-invalid + .select2.select2-container.select2-container--default .select2-selection__arrow { right: 25px!important; } .was-validated select.select2:valid + .select2.select2-container.select2-container--default span.select2-selection, select.select2.is-valid + .select2.select2-container.select2-container--default span.select2-selection { border-color: #0acf97; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%230acf97' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated select.select2:valid + .select2.select2-container.select2-container--default .select2-selection__arrow, select.select2.is-valid + .select2.select2-container.select2-container--default .select2-selection__arrow { right: 25px!important; }

 <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="needs-validation" novalidate> <div class="form-group"> <label>Validated Client Side</label> <select class="form-control select2" data-placeholder="Select an option" required> <option value=""></option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <div class="invalid-feedback"> Please select an option. </div> </div> <div class="form-group"> <label>Validated Server Side</label> <select class="form-control select2 is-valid" data-placeholder="Select an option" required> <option value=""></option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <div class="invalid-feedback"> Please select an option. </div> </div> <button class="btn btn-sm btn-primary" type="submit">Submit</button> </form>

Answer 4

我從 Bootstrap 4 custom-file-input借用並修改了這個css代碼。 這樣， select2 上的驗證應該像在任何常見的表單控件上一樣。

 .was-validated .ls-select2:valid ~ .select2 .select2-selection, .ls-select2.is-valid ~ .select2 .select2-selection { border-color: #4fc47f; } .was-validated .ls-select2:valid ~ .select2 .select2-selection::before, .ls-select2.is-valid ~ .select2 .select2-selection::before { border-color: inherit; } .was-validated .ls-select2:valid ~ .valid-feedback, .was-validated .ls-select2:valid ~ .valid-tooltip, .ls-select2.is-valid ~ .valid-feedback, .ls-select2.is-valid ~ .valid-tooltip { display: block; } .was-validated .ls-select2:valid:focus ~ .select2 .select2-selection, .ls-select2.is-valid:focus ~ .select2 .select2-selection { box-shadow: 0 0 0 0.2rem rgba(79, 196, 127, 0.25); } .was-validated .ls-select2:invalid ~ .select2 .select2-selection, .ls-select2.is-invalid ~ .select2 .select2-selection { border-color: #f35a3d; } .was-validated .ls-select2:invalid ~ .select2 .select2-selection::before, .ls-select2.is-invalid ~ .select2 .select2-selection::before { border-color: inherit; } .was-validated .ls-select2:invalid ~ .invalid-feedback, .was-validated .ls-select2:invalid ~ .invalid-tooltip, .ls-select2.is-invalid ~ .invalid-feedback, .ls-select2.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .ls-select2:invalid:focus ~ .select2 .select2-selection, .ls-select2.is-invalid:focus ~ .select2 .select2-selection { box-shadow: 0 0 0 0.2rem rgba(243, 90, 61, 0.25); }