У меня есть многошаговая форма, где на первой странице есть информация для сбора. Одна из информации - это обязательный выпадающий список. Поэтому я добавляю обязательное поле
<div class="form-group--custom form-group">
<select class="form-control selectpicker" data-style="btn btn-link" id="businessmarkets" name="businessmarkets" required="true">
<option value="" disabled selected="false" style="display: none;" id="businessmarkets">Business Markets Served*</option>
<option value="Large">Large Enterprise (>10,000 Employees)</option>
<option value="Enterprise">Enterprise (1,000-10,000 Employees)</option>
</select>
</div>
Итак, на bootstrap проверочном клике, который работает нормально, и на этом клике он исчезает в новой части формы, где требуются другие входные данные. И больше выпадающих.
$('#toSlide-3').on('click', function (event) {
$("#slide-2 .required, #slide-2 .selectpicker").prop('required',true);
'use strict';
// 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) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
if (form.checkValidity()) {
event.preventDefault();
id2.removeClass('slideIn').addClass('slideOut').delay(1000).queue(function () {
id3.addClass('slideIn').dequeue();
})
$("#slide-2 input, #slide-2 .selectpicker").prop('required',false);
}
}, false);
})
При щелчке происходит добавление необходимых элементов .selectpicker. И при нажатии кнопки это не продвигается, если что-то не выбрано. Так что работает как задумано. Проблема в том, что bootstrap добавляет недействительный класс .is, когда он не проверен, и не делает этого в данный момент.
Это должен быть конечный результат для кнопки, отображаемой с помощью bootstrap.
<button type="button" class="dropdown-toggle bs-placeholder btn btn-link is-invalid" data-toggle="dropdown" role="button" aria-labelledby="undefined" data-id="businessmarkets" title="Business Markets Served*">
<span class="filter-option pull-left">Business Markets Served*</span>
<span class="bs-caret">
<span class="caret">
</span>
</span>
</button>