Требуется при bootstrap выпадающий не работает при добавлении после загрузки - PullRequest
0 голосов
/ 07 апреля 2020

У меня есть многошаговая форма, где на первой странице есть информация для сбора. Одна из информации - это обязательный выпадающий список. Поэтому я добавляю обязательное поле

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...