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

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 - 请注意< IE8 不支持它。

使用“.input-error”是因为它是CSS类选择器，并且会在特定区域中查找类为“input-error”的第一个(如果有)元素.