Select 要求的验证在表单中不起作用

Question

"required" 验证适用于表单

<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab" >Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>

但如果我将具有空值的选项移到列表下方，则无法使用相同的表单。

<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
  <option value="volvo">Volvo</option>
  <option value="saab" >Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>

为什么？ select 元素验证究竟是如何工作的？

参考以下内容：https://www.w3schools.com/tags/att_select_required.asp

Answer 1

这不是 Select2 的问题，而是浏览器使用 select 标签的方式的问题。默认情况下，第一个选项由浏览器 select 编辑。因此，在第一种情况下，"None" 选项是 selected，因此您的验证会捕获错误，因为第一个选项值为 null。在第二种情况下，第一个选项不为空。因此在这种情况下没有验证错误。

要更正它，请添加一个带有空值的空选项并将属性设置为 selected disabled

演示：https://jsfiddle.net/rLmztr2d/2909/

HTML:

<form>
  <select required id="example">
  <option disabled selected></option>
  <option value="volvo">Volvo</option>
  <option value="saab" >Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="">None</option>
</select>
  <input type="submit">
</form>

JS：

    $('#example').select2();

Answer 2

以下内容来自w3 docs:

The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.

...

if the value of the first option element in the select element's list of options (if any) is the empty string

...

这意味着 required 属性只有在第一个元素的值为空时才有效

Select 要求的验证在表单中不起作用

Select Required validation not working in form

html

validation

html-select

required