应用选择菜单的表单验证，类似于 html5 所需的属性 <input>

Applying form validation of select menu similar to html5 required attribute of <input>

本文关键字：属性 input html5 菜单 选择 表单 验证 类似于 应用      更新时间：2023-09-26

我正在尝试使表单中的所有内容都需要，包括选择菜单。 W3Schools表示，没有主流浏览器支持<select>标签上的required属性。

http://www.w3schools.com/tags/att_select_required.asp

真的没有办法像输入文本字段一样在选择菜单上提供客户端验证吗？我这里有一个有效的 plunkr，如果您单击检查所有内容为空白，警告会出现在第一个输入下，即使它上面有一个选择菜单。

如果它正在工作，"此字段是必填的"消息将出现在"选择"菜单下，因为它是第一个无效的表单项。此外，如果您填写所有输入字段，则不会在任何地方显示任何消息。代码是有角度的，跨越 5 个文件，因此请在 plunkr 上查看它。

如果您知道任何方法可以应用相同的验证来选择菜单，或者确认这是不可能的，我将不胜感激。

W3schools像往常一样不正确。像 MDN 这样的有用参考select告诉所有主要浏览器的现代版本都支持required;支持的主要问题是在IE 9及更早版本中缺乏支持。

但是，您需要注意属性的定义：这意味着控件满足约束当且仅当其值为非空时。由于默认情况下会选择第一个选项（除非您使用 selected 属性最初选择另一个选项），因此需要将其值设为空。例：

:invalid { outline: solid red }
<form>
<select name=fruit required>
  <option value="">Please select a fruit
  <option>apple
  <option>orange
</select>
<input type=submit value=Submit>
</form>

如果您还需要涵盖 IE 9 及更早版本，只需添加简单的 JavaScript 代码，在提交表单时（或当您在浏览器中检查表单数据时）检查 select 元素value属性是否不为空。

内置的HTML 5警报不会出现，因为从技术上讲，您已经选择了一个选项。 如果元素中的 ng-model 属性不引用特定的选项值，则 Angular 的 select 指令将创建并默认为空白选项。

检查您的选择元素，您将看到 

<option value="?" selected="selected"></option>

您可以让 ng-model 属性引用有效的选项值，然后隐藏自动生成的空白值选项，但是，您将始终预先选择一个值，并且所选元素的动画效果将丢失。 请参阅此处的示例。

您唯一的其他选择是创建自己的验证，并在每个选择元素下都有一个div，该div 根据是否选择了有效值来显示或隐藏。

相关文章：