Question

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

这适用于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指定其他内容吗？

谢谢，

Answer 1

删除optgroup后，它也适用于Chrome。

似乎Chrome符合此处的规范https://www.w3.org/TR/html5/forms.html#attr-select-required：

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

如果不占位符，则它是提交的有效值，因此只要该选项符合required限制即可是目前选定的。

Answer 2

使用<option selected disabled value="">Food</option>的{{1}}代替

前端表单验证无法在Chrome中使用

2 个答案: