Как использовать класс «invalid-feedback» с селектором выбора из Bootstrap-Select? - PullRequest
Новая
       27

Как использовать класс «invalid-feedback» с селектором выбора из Bootstrap-Select?

0 голосов
/ 10 июля 2019

Я использую 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>

Однако я использую класс «selectpicker» в Bootstrap-Select, и сообщение «invalid-feedback» в div больше не работает. Есть ли способ заставить Bootstrap-Select распознавать класс «invalid-feedback» или мне придется пойти по другому пути?

1 Ответ

0 голосов
/ 10 июля 2019

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

...