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

【问题标题】：how can force focus on first invalid input?如何强制关注第一个无效输入？
【发布时间】：2014-01-19 15:50:55
【问题描述】：

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

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

或

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

【问题讨论】：

标签： javascript jquery validation focus

【解决方案1】：

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

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

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

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

【讨论】：

@kumar，我不知道 select .invalid 类，因为我不知道哪些输入是无效的。我可以通过 querySelectorAll() 检查所有输入并找到第一个无效输入，但我尝试找到更简单的解决方案。
jQuery 不会判断输入是有效还是无效。查看我编辑的答案
@kumar 也许这是我的错误，但我找到了一些关于此的代码：link，并根据需要更改它。这是完美的工作。
嘿，我发现：$("#"+document.querySelectorAll(":invalid")[1].id).focus(); 它工作正常。但我不知道这是正确的方法吗？请有任何想法。
:invalid 不是有效的 jQuery 选择器，而是有效的 css 选择器。它在 post

【解决方案2】：

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

调用后

form[0].checkValidity()

你可以这样称呼

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

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

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

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

【讨论】：

【解决方案3】：

简单的香草 javascript 答案：

document.querySelector('input:invalid')

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

【讨论】：

【解决方案4】：

我认为不需要添加input 选择器，如果您将<select> 设置为required 并具有<option value=""></option>，也可以验证<form> 中的<select> 元素。

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

document.querySelector(':invalid')

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

docuemnt.querySelectorAll(':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>

【讨论】：