使 bootstrap-select 下拉菜单成为必需答案

【问题标题】：Make bootstrap-select dropdown required使 bootstrap-select 下拉菜单成为必需
【发布时间】：2018-12-26 03:41:39
【问题描述】：

我的表单中有下拉列表，它使用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>

如果用户按下提交按钮，如何使我的选择下拉菜单成为必需并且可以验证它必须填写？之前谢谢。

【问题讨论】：

我已经检查了小提琴中的示例 HTML，它工作正常，所以请您检查您的控制台，您在提交数据时遇到了哪个错误，并告诉我这样可以更好地帮助您，而不是直接回答。
@NiketJoshi 当我点击提交按钮时，我在控制台中有An invalid form control with name='location' is not focusable.。
您在按钮或中添加的内容
@NiketJoshi <button type="submit" class="btn btn-default large">Submit Post</button>
提交表单是否使用了 AJAX？

标签： javascript html bootstrap-select bootstrap-selectpicker

【解决方案1】：

一个选择总是有一个值设置在其中。请尝试使用广播组。

点击此处了解有关电台组的更多信息。 HTML5: How to use the "required" attribute with a "radio" input field

【讨论】：

我已经在<select> 标签中添加了required，但是如果我将其留空，则不会发生任何事情。
使用广播组是什么意思？哈哈
当前您的选择有一个值。它的值为“”。尝试使用元素集。它们不会开始被选中，添加所需的至少一个输入将需要单击其中一个。
那么，如果下拉列表中的值也是数千，我将拥有数千个收音机？
好吧，无论如何，这似乎都是一个糟糕的举动。听起来你在那个时候搜索会做得更好。

【解决方案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; 
}

我希望这会对你有所帮助。谢谢。

【讨论】：

【解决方案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>

【讨论】：

如果我添加了disabled，它将删除选择位置。我不想删除它。
$( "#target" ).submit(function( event ) { alert("调用了 .submit() 的处理程序。" ); event.preventDefault(); });
代替那个警报，你可以检查选择标签的值，如果你发现没有选择，你可以简单地使用 preventDefaut()
preventDefault() 将阻止您的表单实际提交
还有一件事，“目标”是您的表单 ID

【解决方案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>

【讨论】：

【解决方案5】：

这是 PHP；但是，对于 Angular（这是我来这里寻找的），您可以创建一个自定义验证器来检查是否选择了 <option value="">Choose Location</option>。在验证器中，您将检查控件的值。如果控件值为 ''，则验证失败。

这适用于模板驱动和反应式表单。

Custom Validators in Angular

【讨论】：

【解决方案6】：

您是否将您的选择放入表单标签中？如果不尝试将其放在表单标签内。请参考-https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required

【讨论】：

绝对是的。我已经把select标签放在form标签里面了。

【解决方案7】：

如果要求不起作用，您可以添加如下所示的 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>

【讨论】：