使 bootstrap-select 下拉菜單成為必需

Question

我的表單中有下拉列表，它使用bootstrap-select來顯示下拉列表。 我想如果用戶提交表單，它將檢查下拉列表是否有價值。 我已經在<select>標記內添加了required但如果我將其留空並按下提交按鈕，則不會發生任何事情。

這是我的代碼：

<div class="form-group">
    <label for="location">Location</label>
    <select name="location" id="location-form" required>
       <option value="">Choose Location</option>
       <?php foreach($location as $row) : ?>
       <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option>
       <?php endforeach; ?>
    </select>
</div>

如果用戶按下提交按鈕，如何使我的選擇下拉菜單成為必需並且可以驗證它必須填寫？ 之前謝謝。

Answer 1

選擇總是有一個值設置在其中。 嘗試改用廣播組。

在此處查看有關無線電組的更多信息。 HTML5：如何在“radio”輸入字段中使用“required”屬性

Answer 2

下面有兩種方法可以幫助我與您分享。

使用這種方式也解決了問題。

<form action="whatever" method="post" novalidate>

或者也使用它，請嘗試以下代碼。

/* For checking the drop-down contain value of not use this. */ 
if(jQuery('#location-form').val() == ''){ 
   alert('Please select the option for location'); 
}else{ 
  return false; 
}

我希望這能幫到您。 謝謝。

Answer 3

在你的第一個選項中添加“禁用”（以及選擇標簽中的必需）：

<div class="form-group"> <label for="location">Location</label> <select name="location" id="location-form" required> <option value="" disabled>Choose Location</option> <?php foreach($location as $row) : ?> <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option> <?php endforeach; ?> </select> </div>

Answer 4

我是編碼新手，但我在這個網站上做了很多研究，我找到了一個解決方案（效率不高但有效）。 該解決方案基於這樣一個事實，即 html5 的“必需”屬性至少在某種程度上起作用 - 它阻止您繼續下一步或提交，但除此之外別無其他 - 例如，沒有錯誤消息，沒有警報，什么都沒有。

解決方案的想法是使用“invalid-feedback”類來顯示錯誤消息，利用它在傳遞“d-block”類之前不會顯示的事實。 然后單擊按鈕使用幾個功能。

$('#button').click(function () {
  $('#id-error').hide(); //if there is indeed a html5 message showing, but it looks bad, then just hide it, if you inspect the msg, html has automatically generate this "id-error" id 
  if ($('#id').is(':disabled')){
      $('#errormsg-id').removeClass('d-block'); 
  } else if (!$('#id').val()){
      $('#errormsg-id').addClass('d-block');
  };
});

$('#id').change(function () {
  if($('#id').val()){
      $('#errormsg-id').removeClass('d-block');
  };
});

<div class="form-group ">
<select id="id" class="selectpicker" required>
<option >...</option>
</select>
<div id="errormsg-id" class="invalid-feedback ">Please make a selection.</div>
</div>

Answer 5

這是PHP； 但是，對於 Angular（這是我來這里尋找的），您可以創建一個自定義驗證器來檢查是否選擇了<option value="">Choose Location</option> 。 在驗證器中，您將檢查控件的值。 如果控制值為 ''，則驗證失敗。

這適用於模板驅動和反應式表單。

Angular 中的自定義驗證器

Answer 6

通過使用默認引導程序 4.* JS 驗證，您可以簡單地添加到 sezel

<select ... required="true">

和一個帶有value=""的空選項

<option value="">Select one</option>

這樣Bootstrap JS庫檢查是否被選中

Answer 7

你把你的選擇放在表單標簽中了嗎？ 如果不嘗試將其放在表單標簽內。 請參考 - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

Answer 8

如果要求不起作用，您可以添加如下所示的 java 腳本驗證，並將“FormnameId”替換為您的表單標簽 ID。

 <script type="text/javascript"> $(document).on('submit','form#FormnameId',function(event){ event.preventDefault(); var sel = $("#location-form").val(); if(sel == ''){ alert('Please select value first'); return false; } }); </script>