语义 UI 绕过浏览器表单消息

Question

我的表单需要一个下拉列表。如果没有语义 UI，一切都按预期工作。如果用户没有选择任何内容，他会从浏览器中收到一条消息"您必须选择一个 optino"或类似消息。

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

一旦我使用语义 UI 设置下拉列表样式，此功能就会消失。

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

这似乎是因为语义 UI 隐藏了原始select并添加了一些基于div 的混蛋选择。但是，由于这个原因，上述某些功能消失了。

有解决方法吗？我想让我的表单即使在禁用 javascript 的情况下也能正常工作。

这是一个jsfiddle。

Answer 1

正如安德鲁在这个问题上指出的那样，这是你可以做的：

嗨，@Pithikos，您对它不起作用的原因是正确的。您还可以使用验证组件，该组件将回退到禁用 JavaScript 的客户端的浏览器验证。

Answer 2

问题似乎是语义 UI 将 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上报告的错误。