如何将 "invalid-feedback" class 与来自 Bootstrap-Select 的选择器一起使用？

Question

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

<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”class，以及 class 中的“invalid-feedback”消息=17=] 不再有效。无论如何强制 Bootstrap-Select 识别“invalid-feedback” class 还是我必须以不同的方式解决这个问题？

Answer 1

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

假设您的 "selectpicker" 看起来像这样：

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

错误消息"Please make a selection"不会显示，即使select元素无效；它会显示，但是，如果它也有 "d-block" class:

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

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

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

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

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

Answer 2

我的一个表单中有多个版本的 bootstrap-select 元素，并且很难让它发挥作用。下面的方法不会在输入中显示复选标记或 x，但会正确显示无效反馈和有效反馈框。

使用 secretagentmango 的回答中的建议，您可以创建一个函数，使用 "selectpicker" class 循环遍历所有输入，获取它们的父 form-group 元素，然后找到子元素"valid-feedback" 和 "invalid-feedback" 元素添加或删除 d-block class 和 hide/show 它们。

function bsSelectValidation() {
  if ($("#myForm").hasClass('was-validated')) {
    $(".selectpicker").each(function (i, el) {
      if ($(el).is(":invalid")) {
        $(el).closest(".form-group").find(".valid-feedback").removeClass("d-block");
        $(el).closest(".form-group").find(".invalid-feedback").addClass("d-block");
      }
      else {
        $(el).closest(".form-group").find(".invalid-feedback").removeClass("d-block");
        $(el).closest(".form-group").find(".valid-feedback").addClass("d-block");
      }
    });
  }
}

现在你需要在表单提交后运行这个函数，你可以直接将它添加到Bootstrap文档的示例代码中：

(function () {
  'use strict';
  window.addEventListener('load', function () {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
        bsSelectValidation();
      }, false);
    });
  }, false);
})();

上述代码与 bootstrap 示例的唯一不同之处在于调用了我们的新函数 "bsSelectValidation"。

现在您需要监听表单中的更改以自动更新 d-block classes 并在人们对表单进行更改时修复 valid/invalid 消息：

$('#myForm').change(bsSelectValidation);

现在，您的 select 菜单应该在表单提交或更改时正确显示有效反馈和无效反馈 div。

Answer 3

我发现如果我简单地删除“option”元素的 value="" 部分，验证消息就会正确显示。也就是说，如果我没有从下拉列表中选择 select 任何内容，则会显示我的“invalid-feedback”消息。当我 select 某事时，它消失了，我可以继续进行。如果您还没有尝试过，那值得一试。我的第一个“选项”很简单：<option>(select)</option>——不存在 'value' 子句。希望这有帮助。

如何将 "invalid-feedback" class 与来自 Bootstrap-Select 的选择器一起使用？

How to use "invalid-feedback" class with selectpicker from Bootstrap-Select?

html

validation

select

bootstrap-4

bootstrap-selectpicker