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

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 。 这会在无效输入上添加类错误，因此您可以捕获它并更改焦点

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 ] 决定）

Answer 4

我认为不需要添加input选择器，它也可以验证<select> <form>中的<select>元素，如果你根据required制作<select>并且有一个<option value=""></option> 。

<select required>
    <option value=""></option>
</select>

document.querySelector(':invalid')

要获取无效元素列表，请使用querySelectorAll 。

docuemnt.qeurySelectorAll(':invalid')

要验证某种形式的元素，请添加formId选择器。

document.querySelector('#formId :invalid')
document.querySelectorAll('#formId :invalid')

 console.log(document.querySelector('#myForm1 :invalid')); console.log(document.querySelectorAll('#myForm1 :invalid'));

 <form id="myForm1"> <fieldSet> <legend>Form1</legend> <select id="select1" required> <option value="" selected>- please choose -</option> <option value="1">A</option> <option value="2">B</option> </select> <input type="text" id="requiredTbx1" placeholder="Required" required/> <input type="text" id="notRequiredTbx1" /> </fieldSet> </form> <form id="myForm2"> <fieldSet> <legend>Form2</legend> <select id="select2" required> <option value="" selected>- please choose -</option> <option value="1">A</option> <option value="2">B</option> </select> <input type="text" id="requiredTbx2" placeholder="Required" required/> <input type="text" id="notRequiredTbx2" /> </fieldSet> </form>