用于选择的自定义 html5 验证答案

【问题标题】：Custom html5 validation for select用于选择的自定义 html5 验证
【发布时间】：2020-07-22 20:23:34
【问题描述】：

我有一个这样的元素选择：

<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

我希望用户选择一个选项，例如opt2, opt3... 但是 opt1, 如何使用 html 5 验证来验证选择？

【问题讨论】：

标签： javascript html html5-validation

【解决方案1】：

我认为在这里添加验证的唯一方法是将默认选项值设置为空字符串并将required 属性添加到select 元素。现在你可以点击提交按钮来查看验证：

<form>
  <label >Choose an option:</label>
  <select name="select" required>
    <option value="" disabled selected>Select One Value Only</option>
    <option value="opt2">Type 2</option>
    <option value="opt3">Type 3</option>
  </select>
  <input type="submit">
</form>

这里的问题是，当您将默认选项的值设置为空字符串以外的其他值时，验证会将其推断为已选择有效值，因此此时不会触发验证。

【讨论】：

【解决方案2】：

尝试使用：

<select name="select" required>
  <option value="opt1" selected="selected" disabled>Select One Value Only</option>
  <option value="opt2">Type 2</option>
  <option value="opt3">Type 3</option>
</select>

【讨论】：

【解决方案3】：

您可以执行以下操作：

<select name="select">
  <option value="opt1" selected disabled>Select One Value Only</option>
  <option value="opt2">Type 2</option>
  <option value="opt3">Type 3</option>
</select>

在上面的 sn-p 中，opt1 默认被选中。用户只能选择opt2 或opt3，但是一旦他们这样做了，他们就无法选择opt1，希望这是您正在寻找的行为。

【讨论】：

感谢您的快速回答，如果用户未选择任何内容，则会选择 opt1，这不是预期的。
我已经更新了我的答案，意外删除了value="opt1"。
如果忘记在选择器中选择选项，如何提醒用户选择opt2或其他选项？本质上，我想使用html5验证来做到这一点，但我不知道如何自定义它。