javascript - Bootstrap 和 Select2 表单验证
问题描述
解释
我正在尝试将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>
在此先感谢
路易斯。
解决方案
您需要申请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>
推荐阅读
- excel - Is there a way to do a sum of columns in an Excel pivot table with a calculated field greyed out? (It contains distincts values fields)
- python - 为什么 pyautogui 热键不能在 mac 上一直工作?
- reactjs - 制作一个搜索静态只读数据库(例如电影搜索)的 React 网站最便宜的方法是什么?
- php - 如何从菜单更新数据库?
- c# - 是否可以缩短此代码?如果字符串为空或开头有特定值
- hyperledger-fabric - 在fabric中,如果一个块中的两个交易发生冲突,结果是什么
- reactjs - How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?
- django - 来自 API 调用的 Django 自动填充表单字段
- php - PHP POSTGRESQL 数据库连接
- python - 在文件 Dockerfile、docker-compose.yml、python.py 和 shell 之间共享值