Question

我有一个html表单，该表单的下拉列表包含一些值。如果用户没有选择一个选项并移至下一个字段，则需要给出错误消息。我已经使用了必填属性，但是在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解决方案也不错。提交数据时，我正在检查空白字段，但是如果用户未从下拉列表中选择值并移至下一个字段，我想显示一条错误消息。

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

Answer 2

尝试将onfocusout上的select选项与某些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 个答案: