Как использовать класс invalid-feedback с selectpicker из Bootstrap-Select?

У меня было несколько версий элементов bootstrap-select в одной из моих форм, и мне было очень трудно заставить это работать. В приведенном ниже методе не будет отображаться галочка или x на вводе, но будут правильно отображаться поля недопустимая обратная связь и действительная обратная связь.

Используя совет из ответа secretagentmango, вы можете создать функцию, которая перебирает все ваши входные данные с помощью класса «selectpicker», берет их родительский элемент группы форм, а затем находит дочерние элементы «valid-feedback» и «invalid-feedback» элементы, чтобы добавить или удалить класс 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 Docs:

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

Единственное, что в приведенном выше коде отличается от примера начальной загрузки, - это вызов нашей новой функции «bsSelectValidation».

Теперь вам нужно отслеживать изменения в форме, чтобы автоматически обновлять классы d-блока и исправлять допустимые / недопустимые сообщения, когда люди вносят изменения в форму:

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

Теперь выбранные вами меню должны правильно отображать блоки действительной обратной связи и недопустимой обратной связи при отправке или изменении формы.

Я понял, как это сделать, и в более общем плане это ответ на любой случай, когда вам нужно «вручную» заставить ошибку работать с собственной системой проверки 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>

Сообщение об ошибке «Пожалуйста, сделайте выбор» не будет отображаться, даже если выбранный элемент недействителен; однако он покажет, есть ли у него также класс "d-block":

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

Итак, чтобы вручную вызвать ошибки, вы должны использовать JavaScript для проверки псевдокласса CSS ": invalid"; если у него есть этот псевдокласс, тогда вы добавляете класс «d-block» в свой div, чтобы показать ошибку. Вы можете использовать методы match () и classList.add ():

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

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

Вы делаете это, чтобы добавить сообщение, и вы можете удалить его, проверив ": valid" и удалив "d-block" из classList.