Question

“必需”验证适用于表单

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

为什么？选择元素验证的工作原理如何？

引用以下内容：https://www.w3schools.com/tags/att_select_required.asp

Answer 1

以下来自w3 docs：

必填属性是布尔属性。指定时，   用户将需要在提交表单之前选择一个值。

...

如果select元素的第一个option元素的值   选项列表（如果有）是空字符串

...

这意味着必填属性仅在第一个元素的值为空时有效

Answer 2

Select2不是问题，而是浏览器使用select标记的方式。默认情况下，浏览器会选择第一个选项。因此，在第一种情况下，选择了“无”选项，由于第一个选项值为null，因此您的验证会捕获错误。在第二种情况下，第一个选项不为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();

选择所需的验证不适用于表单

2 个答案: