Html 如何使用；“无效反馈”；使用引导选择中的selectpicker初始化？

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

<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识别“无效反馈”类，或者我必须以另一种方式进行此操作？

我找到了如何执行此操作的方法，更一般地说，这是一个解决方法，可以在任何时候，您必须“手动”强制错误以使用Bootstrap的本机验证系统。它真的很黑，但我找不到任何其他有效的

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

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

---

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

我的一个表单中有多个版本的引导选择元素，要让它工作起来真的很困难。下面的方法不会在输入上显示复选标记或x，但会正确显示无效反馈和有效反馈框

使用secretagentmango的答案中的建议，您可以创建一个函数，通过“selectpicker”类循环所有输入，获取其父表单组元素，然后查找子元素“有效反馈”和“无效反馈”元素 添加或删除d块类并隐藏/显示它们

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");
      }
    });
  }
}

现在，您需要在表单提交后运行此函数，您可以直接将其添加到引导文档中的示例代码中：

(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类并修复有效/无效消息：

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

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

(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);
})();

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