下拉必填字段

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 不喜欢它，声明

Error: Element option without attribute label must not be empty.

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

Answer 1

我在使用 materializecss 时遇到了类似的问题。

所以我在你写的时候给了它第一个选项，但是是这样的：

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

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

下拉必填字段

Dropdown required field

jquery

html

jquery-validate

selectlist