Question

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

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

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

有解决方法吗？即使禁用了JavaScript，我也希望自己的表单能够正常运行。

这是jsfiddle。

Answer 1

安德鲁指出这个问题，这就是你能做的：

嗨@ Pithikos，你对它不起作用的原因是正确的。您还可以使用validation组件，这些组件将对已禁用JavaScript的客户端进行浏览器验证。

Answer 2

问题似乎是语义用户界面将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属性。

这是bug reported on github。

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

2 个答案: