验证后指向第一个字段

Question

我有一个网页，其中包含复选框，输入字段，下拉菜单等，

使用javascript检查强制条件。如果有人未能填写这些字段并按下按钮验证错误弹出窗口。

现在我想要实现的是当某人未能在必填字段中输入信息时，光标应该转到导致错误的第一个字段。

有谁能建议我怎么做？

Answer 1

为每个无效字段添加一个类（类似input-error）。然后使用类似的东西：

var errors = document.querySelectorAll(".input-error");
if (errors.length > 0) {
    errors[0].focus();
}

以下是一个示例：http://jsfiddle.net/NtHzV/1/

这完全取决于代码的结构，验证方式，验证实际执行的内容以及HTML的内容。

同时，如果您正在执行与我的示例类似的操作，您可能会跟踪第一个输入错误，然后在验证结束时focus()。像这样：

http://jsfiddle.net/NtHzV/2/

<强>更新

Bergi指出querySelector也可能被使用（而不是querySelectorAll），因为你只是在寻找有错误的第一个输入。所以这是一个更新：

var error_input = input_area.querySelector(".input-error");
if (error_input !== null) {
    error_input.focus();
}

http://jsfiddle.net/NtHzV/3/

以下querySelector的规格：https://developer.mozilla.org/en-US/docs/DOM/element.querySelector - 请注意＆lt; IE8不支持它。

使用".input-error"是因为那是CSS类选择器，并且会在“input-error”类的特定区域中找到第一个（如果有）元素。

Answer 2

此行将页面聚焦在您指定的元素上。您应该能够在验证检查中实现此功能，以专注于不良元素。

document.getElementById("ID_Of_bad_field").focus();