下拉列表的必需属性不起作用

Question

我有一个 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>

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

Answer 1

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

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

Answer 2

尝试在您的select上使用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>

JS

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 以检查是否所有字段都已完成等。但这是我的两分钱在紧要关头！

下拉列表的必需属性不起作用

问题描述

2 个解决方案

解决方案1
4 2019-04-24 13:05:21

解决方案2
0 已采纳 2019-04-24 14:39:14

下拉列表的必需属性不起作用

问题描述

2 个解决方案

解决方案1 4 2019-04-24 13:05:21

解决方案2 0 已采纳 2019-04-24 14:39:14

解决方案1
4 2019-04-24 13:05:21

解决方案2
0 已采纳 2019-04-24 14:39:14