Question

我的表单中有一个下拉列表，该列表使用const form = document.getElementById('valves'); form.addEventListener('change',calculateInt);来显示下拉列表。我想让用户提交表单，它将检查下拉列表是否有价值。我已经在bootstrap-select标记中添加了required，但是如果我将其保留为空并按提交按钮，则什么也不会发生。

这是我的代码：

<select>

如果用户按下“提交”按钮，如何使我的选择下拉列表成为必需，并且可以验证是否必须填写？谢谢你。

Answer 1

一个选择总是设置有一个值。尝试改用无线电组。

在此处查看有关广播组的更多信息。 HTML5: How to use the "required" attribute with a "radio" input field

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

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

Answer 4

在您的第一个选项中添加“已禁用”（以及选择标记中的必填项）：

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

如果要求不起作用，您可以添加如下所示的Java脚本验证，并用表单标签ID替换“ FormnameId”。

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

Answer 6

我是编码的新手，但是我在此站点上进行了很多研究，发现了一个解决方案（效率不高，但是可以使用）。此解决方案基于html5“ required”属性至少可以正常工作的事实-它阻止您继续进行下一步或提交内容，例如，没有错误消息，没有警报，什么都没有。

解决方案的想法是使用“ 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 7

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

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

Custom Validators in Angular

要求引导选择下拉菜单

7 个答案: