Question

我正在使用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中的“无效反馈”消息不再起作用。无论如何，是否有必要强迫Bootstrap-Select识别“无效反馈”类，或者我将不得不以另一种方式来解决这个问题？

Answer 1

我找到了解决方法，更普遍的说，这是您在必须“手动”强制错误才能与Bootstrap的本机验证系统一起使用时的答案。确实很hacky，但是我找不到其他有效的方法。

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

null

即使select元素无效，也不会显示错误消息“ Please做出选择”；但是它将显示是否还具有“ d-block”类：

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

因此，要手动强制错误，您必须使用JavaScript检查“：invalid” CSS伪类；如果它具有此伪类，则将“ d-block”类添加到div中以显示错误。您可以使用matchs（）方法和classList.add（）：

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

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

Answer 2

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

使用来自secretagentmango答案的建议，您可以创建一个函数，该函数使用“ selectpicker”类循环遍历所有输入，获取其父表单组元素，然后找到子项“ valid-feedback”和“ invalid” -反馈”元素添加或删除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");
      }
    });
  }
}

现在，您需要在表单提交后运行此功能，并且可以将其直接从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类并修复有效/无效消息：

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

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

如何通过Bootstrap-Select中的selectpicker使用“无效反馈”类？

2 个答案: