Семантический интерфейс обходит сообщения формы браузера

У меня есть раскрывающийся список, необходимый для моей формы. Без семантического пользовательского интерфейса все работает так, как ожидалось. Если пользователь ничего не выбирает, он получает сообщение «Вы должны выбрать оптино» или подобное в браузере.

<select required>
     <option value="" selected="">Please select</option>
     <option value="True">Yes</option>
     <option value="False">No</option>
</select>

Как только я оформляю свой раскрывающийся список с помощью Semantic UI, эта функция исчезает.

 <select class="ui search dropdown" required>
     <option value="" selected="">Please select</option>
     <option value="True">Yes</option>
     <option value="False">No</option>
 </select>

Похоже, это связано с тем, что Semantic UI скрывает исходный select и добавляет некоторый убогий выбор, основанный на div. Однако из-за этого некоторые из описанных выше функций отсутствуют.

Есть ли способ обойти это? Я хочу, чтобы мои формы работали даже с отключенным javascript.

Вот jsfiddle.


forms dropdown semantic-ui
person Pithikos    schedule 12.05.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Как Эндрю указал на проблему, вот что вы можете сделать:

Привет, @ Pithikos, вы правы в отношении причины, по которой он не работает. Вы также можете использовать компонент validation, который будет возвращаться к проверке браузера для клиентов с отключен JavaScript.

person Vinayak Kulkarni    schedule 12.05.2017

arrow_upward
0
arrow_downward

Проблема, похоже, в том, что семантический интерфейс преобразует тег select в какой-то другой HTML, включая тег input. Проблема в том, что он не соблюдает атрибут required, поэтому новый тег ввода не имеет его.

Вот обходной путь (после $('.ui.dropdown').dropdown();):

  $('.ui.dropdown').each(function(){
     $select = $(this).find('select');
     $input = $(this).find('input');
     if ($select.attr('required') && $input) {
         $input.attr('required', 'true');

         // Remove required attribute when user or browser focuses on
         // the input element and thus getting the selection menu. After
         // this event we assume there is a guarantee that the input has
         // a value.
         $('.ui.dropdown input').on('focus', function(e){
            $(this).removeAttr('required');
         });
     }
  });

Обходной путь заключается в добавлении необходимого атрибута required. Как только этот ввод сфокусирован, мы предполагаем, что значение было выбрано, и удаляем атрибут required.

Вот ошибка, обнаруженная на github.

person Pithikos    schedule 12.05.2017