html Bootstrap和Select2表单验证

qltillow  于 4个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(92)

解释
我尝试在Select2's select boxes中使用Bootstrap的表单验证，但由于某些原因，它无法正常工作。它确实显示了此反馈文本，但没有显示绿色/红边框颜色，正如您在下面的代码中所看到的。

代码

您也可以在this JSFiddle中看到它。

$(".select").select2({
  minimumResultsForSearch: Infinity
});

个字符
先谢了，
路易斯。

Html

4条答案

按热度按时间
b0zn9rqh

b0zn9rqh1#

您需要将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>
赞(0）分享  回复(0）举报  4个月前
kqlmhetl

kqlmhetl2#

我今天遇到了同样的问题，我只使用CSS向Select 2添加了验证样式--很像Hiren的回答。
我的答案的好处是，当你使用'is-valid'和'is-invalid'类（当你有服务器端验证时可能会使用）时，它也会应用样式。我的CSS还添加了tick和cross图标，以保持与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>
赞(0）分享  回复(0）举报  4个月前
z18hc3ub

z18hc3ub3#

试试这个

$(".select").select2({
  minimumResultsForSearch: Infinity
});

个字符

赞(0）分享  回复(0）举报  4个月前
vof42yt1

vof42yt14#

我从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);
}

字符串

赞(0）分享  回复(0）举报  4个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com