проверка выпадающего списка формы bootstrap 5 с выбранным подключаемым модулем

#javascript #forms #validation #bootstrap-5

#javascript #формы #проверка #bootstrap-5

Вопрос:

Я использую Bootstrap 5 с выбранным плагином, чтобы добавить функцию поиска в длинные выпадающие списки. Я использовал тему css для Chosen, которая была разработана для имитации Bootstrap 4, но результат в порядке.

Проблема в том, что стили проверки формы не применяются к выбранному выбору.

Мне искусственно удалось применить стиль к выбранному элементу в зависимости от основного состояния проверки выбора при отправке формы :

 function validate_chosen(element) {

var select = $('#' element.id   '_chosen .chosen-single');
if (element.checkValidity()) {              
    select.addClass('is-valid');  
    select.removeClass('is-invalid');
}
else {
    select.addClass('is-invalid');  
    select.removeClass('is-valid');
 }
}
 

но это решение выглядит грубым, и у меня все еще есть проблема с тем, что стиль не обновляется при изменении значения.
Я пытался добавить событие «click» в выбранный список, но, похоже, выбранный JS берет верх над моими событиями.

Не могли бы вы помочь мне разобраться в этом? Я бы не возражал переключиться на другой плагин, если бы он имел аналогичные функциональные возможности, но лучшую интеграцию с внешним видом bootstrap.

Спасибо

Комментарии:

1. Если вы используете Bootstrap, моим лучшим советом было бы использовать их собственный механизм проверки формы. Надеюсь, это также уменьшит объем кода, который вам нужен. Вот документы. getbootstrap.com/docs/5.0/forms/validation