如何强制关注第一个无效输入？

Question

在运行验证例程后，有没有办法强制关注第一个无效输入？像这样的东西：

$("input:invalid:first").focus();

或者

$("input:first:invalid").focus();

Answer 1

您可以根据类别选择输入，然后使用:first过滤器

$('.error').filter(":first").focus()

这提供了更好的性能，因为:first是 jQuery 扩展，而不是 CSS 规范的一部分。使用 :first 的查询无法利用本机 DOM querySelectorAll() 方法提供的性能提升。

编辑：您可以使用 jQuery 插件，例如jQuery Validator。这会在无效输入上添加类错误，因此您可以捕获它并更改焦点

嘿，我发现： `$("#"+document.querySelectorAll(":invalid")[1].id).focus();` 工作正常。但我不知道这是正确的方法吗？有什么想法请。 (2认同)

Answer 2

如果您有表单选择器，这将起作用

调用此后

form[0].checkValidity()

你可以这样称呼

//var form = $(form);
//var form = $("#formId");

form.find(":invalid").first().focus();

当调用 checkValidity 时，浏览器会将样式“：invalid”添加到我确信您已经知道的字段中。因为你只需要第一个来聚焦，我们将首先使用然后聚焦链

可能有更好的选择来做同样的事情，但这就是我所做的。