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

【问题标题】：Applying form validation of select menu similar to html5 required attribute of <input>应用类似于 <input> 的 html5 必需属性的选择菜单的表单验证
【发布时间】：2014-11-25 01:05:47
【问题描述】：

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

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

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

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

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

【问题讨论】：

required 绝对适用于所有主流浏览器，并且使用 angular，您可以轻松检查提交时的 form.valid 属性，它会告诉您它是否有效。除非您知道自己在做什么并且只需要函数参考，否则我永远不会听 w3schools。
表单提交后你在做什么？如果它正在调用 PHP 文件，您可以在其中进行验证，如果出现错误则重定向。
@ShanRobertson 不仅在与带有 html5 的 <input> 标记一起使用时吗？（真正的问题）
@SO 这将是服务器端验证，它已经存在。它正在调用一个 PHP AJAX 文件
@SO 正确，你必须有一个有效的 html5 文档。

标签： javascript html angularjs client-side-validation

【解决方案1】：

W3schools 和往常一样不正确。 MDN on 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 代码，在要提交表单时（或在您检查浏览器中的表单数据）。

【讨论】：

在我的 plunkr 中将 ...> <option value=""></option> </select> 添加到 select.html 中，并且不与任何 CSS 冲突。惊人的快速修复。

【解决方案2】：

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

检查你的选择元素，你会看到

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

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

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

【讨论】：