需要下拉字段

Question

我有一个联系表单，其中包含一系列可选字段和必填字段。其中一个必填字段是下拉列表。它看起来像这样：

<div>
    <select name="favFruit[]" size="1" required>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="plum">Plum</option>
        <option value="pomegranate">Pomegranate</option>
        <option value="strawberry">Strawberry</option>
        <option value="watermelon">Watermelon</option>
    </select>
</div>

jfiddle

我使用jQuery来验证所有必需的字段，它工作正常。除非此字段始终显示为已由用户完成，因为下拉列表始终将第一个选项显示为默认选项。因此，用户可以简单地保持此下拉列表不变，并且jQuery假定表单已填充了第一个选项和验证。

所以我对表单做了一个简单的更改，通过添加

将第一个字段留空

<option value=""></option>

您可以在此处找到一个有效的示例：jfiddle

现在显示为空白，直到用户从下拉列表中选择一个选项。问题是我知道这在语义上并不正确，因为W3C Validator并不喜欢它，说明

  

错误：没有属性标签的元素选项不能为空。

执行此操作的正确方法是什么，以便强制用户实际做出选择并符合正确的标记？

Answer 1

我遇到了与materializecss类似的问题。

所以我所做的是我给你的第一个选择，就像你写的那样：

<option value="" disabled> Make a choice:

用户知道他必须选择某事，你可以检查它是否为空。 你仍然可以用jquery检测它，不要让它被验证。