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

Question

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

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

或

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

Answer 1

您可以根据课程选择输入，然后使用：第一个过滤器

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

这提供了更好的性能，因为：第一个是一个jQuery扩展而不是CSS规范的一部分。使用的查询：首先不能利用本机DOM提供的性能提升querySelectorAll（）方法

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

Answer 2

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

致电之后

form[0].checkValidity()

您可以打电话给

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

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

当调用checkValidity时，浏览器将在我确定您已经知道的字段中添加样式“：invalid”。因为您只需要第一个焦点即可，我们将先使用焦点，然后再使用链接链

可能会有更好的选择来执行相同操作，但这就是我所做的。

Answer 3

简单的原生 javascript 答案：

document.querySelector('input:invalid')

它将匹配第一个无效输入 （由 required, value[, pattern] 决定）