下拉菜单的必需属性不起作用答案

【问题标题】：Required attribute for a dropdown does not work下拉菜单的必需属性不起作用
【发布时间】：2019-04-24 13:02:37
【问题描述】：

我有一个包含几个值的下拉列表的 html 表单。如果用户没有选择一个选项并移动到下一个字段，我需要给出一条错误消息。我使用了 required 属性，但它在 Chrome 和 Firefox 中没有触发。

这是我的代码：

<select name="gender" id="gender" style="max-width:100%"  required>
       <option value="">Select Gender</option>
       <option value="Male">Male</option>
       <option value="Female">Female</option>
       <option value="Other">Other</option>
</select>

必需的属性在 Chrome 和 Firefox 上不起作用。 JavaScript 解决方案也很好。在提交数据时，我正在检查空字段，但如果用户未从下拉列表中选择值并移至下一个字段，我想显示一条错误消息。

【问题讨论】：

标签： html

【解决方案1】：

使用下面的代码，不需要任何脚本，使用form标签

<!DOCTYPE html>
<html>
<body>

<form>
<select required>
  <option value="">None</option>
  <option value="demo">demo</option>
  <option value="demo1">demo1</option>
  <option value="demo2">demo2</option>
  <option value="demo3">demo3</option>
</select>
<input type="submit">
</form>

</body>
</html>

【讨论】：

下拉后我没有提交按钮。下拉列表旁边有一个字段。如果用户没有从下拉列表中选择选项并移至下一个字段，则应该会出现错误消息。
制作下一个字段以提交按钮。
不明白您的上一条评论。

【解决方案2】：

尝试将onfocusout 上的onfocusout 选项与一些Javascript 配对使用。

HTML

<select name="gender" id="gender" onfocusout="check()" style="max-width:100%"  required>
       <option value="">Select Gender</option>
       <option value="Male">Male</option>
       <option value="Female">Female</option>
       <option value="Other">Other</option>
</select>

function check(){
var x = document.getElementById("gender").selectedOptions[0].label;

  if(x == "Select Gender"){
    alert("Please select an option.");
   }
}

CodePen.io：https://codepen.io/anon/pen/XQxQgw

毫无疑问，有一种更有效的方法可以做到这一点，您需要调整 JS 以检查是否所有字段都已完成等。但这是我的两分钱紧要关头！

【讨论】：

先生。蛞蝓这工作得很好。只是几件事，1）我如何使它通用，因为我有其他下拉菜单？ 2）如何让焦点在错误消息后保持不变？
就使其通用而言，您可以使用一些 jquery 为您的选择上的“onblur”事件添加一个事件侦听器，但正如下面的答案中提到的那样，围绕所有选择的表单标签将提供“请输入值”通知以及关注相关元素。如果这不是您想尝试的，请使用 focus()，这将重新关注您调用它的元素，即 object.focus()
谢谢蛞蝓先生。