語義UI繞過瀏覽器窗體消息

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並增加了一些bastardized選擇基於div的。但是由於這個原因，上述的一些功能消失了。

有沒有解決方法呢？即使JavaScript禁用，我也想保持我的表單正常工作。

這是jsfiddle。

Answer 1

安德魯指出了這個問題，這是你可以做什麼：

嗨@Pithikos，你關於它不工作的原因是正確的。您還可以使用validation組件，該組件可以回退到瀏覽器驗證以禁用JavaScript的客戶端。

Answer 2

這個問題似乎是語義UI的select標籤轉換成包括的input標籤其他一些HTML 。問題是它不尊重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。