javascript - 验证后指向第一个字段

Question

我有一个包含复选框、输入字段、下拉列表等的网页，

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

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

谁能建议我如何做到这一点？

score 2 · Accepted Answer

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

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

这是一个例子：http: //jsfiddle.net/NtHzV/1/

这实际上完全取决于您的代码结构、您的验证方式、您实际使用验证做什么以及您的 HTML 是什么。

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

更新：

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

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

以下是有关规格querySelector：https ://developer.mozilla.org/en-US/docs/DOM/element.querySelector - 请注意，< IE8 不支持它。

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

score 1 · Accepted Answer

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

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

2 回答 2