Forms 语义用户界面绕过浏览器表单消息

我的表格需要一个下拉列表。没有语义用户界面，一切正常。如果用户没有选择任何内容，他会从浏览器中收到一条消息“您必须选择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的非标准化select。然而，由于这个原因，上面描述的一些功能消失了

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

---

这是一个。

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

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

---

问题似乎是语义UI将

select

标记转换为其他一些HTML，包括

输入
标记。问题是它不尊重
required
属性，因此新的输入标记最终没有它

这里有一个解决方法（在
$（'.ui.dropdown'）.dropdown（）之后；
）：

解决方法是添加必要的
required
属性。一旦该输入被聚焦，我们假设已经选择了一个值，并删除
required
属性

这是我的建议

  $('.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');
         });
     }
  });