Bootstrap 和 Select2 表单验证

Posted

技术标签:

【中文标题】Bootstrap 和 Select2 表单验证【英文标题】：Bootstrap and Select2 form validation 【发布时间】：2019-06-27 20:00:27 【问题描述】：

说明

我正在尝试将Bootstrap's form validation 与Select2's select boxes 一起使用，但由于某种原因，它无法正常工作。它确实显示了此反馈文本，但不显示绿色/红色边框颜色，如下面的代码所示。

代码

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

提前致谢， 路易斯。

【问题讨论】：

【参考方案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>

【讨论】：

哇，我不知道在 CSS 中使用 + 符号是什么/如何/为什么...现在我知道以及使用它的好方法。 传奇，救了我:)【参考方案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>

【讨论】：

这不起作用，因为您没有使用 Select2 :( 使其与 Select2 一起使用。我在上面的问题中解释过。【参考方案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>

【讨论】：

太棒了！完美运行。我对你的例子有点麻烦，因为我没有使用.select2 类来初始化它。只需添加一个必须使用.select2 的提示，此代码无需更改即可工作。【参考方案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);

【讨论】：

以上是关于Bootstrap 和 Select2 表单验证的主要内容，如果未能解决你的问题，请参考以下文章

使用 Select2 和 Bootstrap 截取文本

使用带有 JqGrid 表单的 bootstrap select2

Select2 和 HTML5 表单验证

使用 Select2 和 Bootstrap 样式的问题

在处理我的表单之前验证 select2 字段[重复]

使用Javascript / jQuery进行Bootstrap 4表单验证