前端表单验证在 Chrome 中不起作用答案

【问题标题】：Front-end form validation not working in Chrome前端表单验证在 Chrome 中不起作用
【发布时间】：2019-12-26 10:18:15
【问题描述】：

我想创建一个带有所需下拉菜单的表单。如果在从下拉菜单中选择项目之前单击提交按钮，用户应该会看到弹出错误消息。例如，在 FF 中，此消息通常是：“请在列表中选择一个项目”或在 Chrome 中：“请填写此字段”或在 IE 中：“您必须从列表中选择一个项目”。

这在 IE 和 Firefox 上运行良好，但在 Google Chrome 中却让我抓狂。没有弹出消息并且用户可以继续填写其他字段的地方：

代码如下：

<select class="form-control" name="Product" id="product" required="">
        <optgroup id="Food" label="Food">                                               
        <option value="" label="Select a product ...">Select a product ... </option>
        <option value="Arepa" label="">Arepa</option>
        <option value="Empanadas" label="">Empanadas</option>
        <option value="Tamales" label="">Tamales</option>
        </optgroup>
</select>

我是否需要为 Chrome 指定其他内容？

谢谢，

【问题讨论】：

删除 optgroup 后，它也可以在 Chrome 中使用。

标签： html forms google-chrome

【解决方案1】：

删除 optgroup 后，它也可以在 Chrome 中使用。

看来 Chrome 符合这里的规范，https://www.w3.org/TR/html5/forms.html#attr-select-required：

如果一个select元素指定了一个required属性，没有指定multiple属性，并且显示大小为1；如果选择元素的选项列表（如果有）中的第一个选项元素的值是空字符串，并且该选项元素的父节点是选择元素（而不是 optgroup 元素），那么该选项就是选择元素的占位符标签选项。”

如果它是 not 占位符，则它是提交的有效值，因此只要该选项是当前选择了一个。

【讨论】：

谢谢！问题是我在下拉菜单中组织了不同的选项，这就是 optgroup 存在的原因。有没有办法在不删除 optgroup 的情况下处理这个问题？
我不这么认为。 Chrome 似乎按照此处的预期实现了规范，因此您在其他浏览器中“工作”的内容在这里被视为错误。

【解决方案2】：

使用<option selected disabled value="">Food</option> 代替<optgroup id="Food" label="Food">

【讨论】：