html - 如何将 "invalid-feedback"类与 Bootstrap-Select 中的选择器一起使用？

Question

我正在使用 Bootstrap 在我的网络应用程序上进行一些表单验证。使用普通的选择菜单，当字段无效时很容易弹出错误消息:

<select class="someClass" required>
    <option value="">Select an option</option>
    <option>foo</option>
    <option>bar</option>
</select>
<div class="invalid-feedback">Please make a selection.</div>

但是，我使用的是 Bootstrap-Select 的“selectpicker”类，div 中的“invalid-feedback”消息没有更长的作品。无论如何强制 Bootstrap-Select 识别“invalid-feedback”类，还是我必须以不同的方式解决这个问题？

Answer 1

我想出了如何做到这一点，更一般地说，这是一个答案，适用于任何时候您必须“手动”强制错误以使用 Bootstrap 的 native 验证系统。这真的很 hacky，但我找不到其他有用的东西。

假设您有一个如下所示的“选择器”:

<select id="mySelect" class="selectpicker" required>
    <option value="">Select an option</option>
    <option>foo</option>
    <option>bar</option>
</select>
<div id="error" class="invalid-feedback">Please make a selection.</div>

错误消息“请进行选择”不会显示，即使选择元素无效；但是，它会显示它是否也有“d-block”类:

<div id="error" class="invalid-feedback d-block">Please make a selection.</div>

因此要手动强制错误，您必须使用 JavaScript 来检查“:invalid”CSS 伪类；如果它有这个伪类，那么你将“d-block”类添加到你的 div 中以显示错误。您可以使用 matches() 方法和 classList.add():

var selector = document.getElementById("mySelect");
var errorMsg = document.getElementById("error");

if(selector.matches(":invalid"))
{
   errorMsg.classList.add("d-block");
}

您这样做是为了添加消息，您可以通过检查“:valid”并从 classList 中删除“d-block”来删除它。