如何强制将焦点放在第一个无效输入上？

Question

有没有一种方式可以在运行验证程序后强制聚焦于第一个无效输入？就像这样：

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

或者

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

- A.Pourhadi

Answer 1

您可以根据类选择您的输入，然后使用:first筛选器。

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

这样做能够获得更好的性能，因为:first是jQuery的扩展而不是CSS规范的一部分。使用:first的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。 编辑：您可以使用像jQuery验证器这样的jQuery插件。它会在无效输入上添加一个类错误，因此您可以捕获它并更改焦点。

- Saravana Kumar

---

@ Kumar，我不知道"select .invalid"类是什么意思，因为我不知道哪些输入无效。我可以通过querySelectorAll()检查所有输入并找到第一个无效的输入，但我希望找到更简单的解决方案。 - A.Pourhadi

jQuery不会告诉您输入是否有效。请查看我的编辑答案。 - Saravana Kumar

@kumar 或许是我的错误，但我找到了一些相关的代码：链接，并按照自己的需求进行了修改。现在它完美地工作了。 - A.Pourhadi

嘿，我发现这个代码：$("#"+document.querySelectorAll(":invalid")[1].id).focus(); 运行良好。但我不知道这是否是正确的方法？有什么想法吗？ - A.Pourhadi

":invalid" 不是一个有效的 jQuery 选择器，但是是一个有效的 CSS 选择器。它在 IE10 及以下版本中无法工作。您可能需要考虑阅读这篇文章：post。 - Saravana Kumar

Answer 2

如果您有表单选择器，则此方法可行。

调用此方法后，它将起作用。

form[0].checkValidity()

您可以称之为：

您可以这样称呼此

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

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

在调用checkValidity时，浏览器将会向字段中添加样式":invalid"，我相信您已经知道了这一点。因为您只需要将焦点放在第一个字段上，所以我们将使用"first then focus chained"。

可能有更好的方法来完成同样的功能，但这就是我采用的方法。

- AaA

---

form.find()导致Uncaught TypeError: form.find is not a function。 - mrodo

@mrodo，请看上面被注释的行，form应该是一个jQuery对象。JavaScript没有find方法。如果你需要使用纯JavaScript来实现，你需要迭代所有的表单输入，并检查它们的类别，当找到一个时，跳出循环。在大多数情况下，我发现使用jQuery比纯JavaScript更容易处理事情。 - AaA

Answer 3

我认为不需要添加选择器，也可以在

中验证元素，如果你将设置为必填，并且具有

<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>

- Jun Yu

Answer 4

简单的原生JavaScript答案：

document.querySelector('input:invalid')

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

- Mechanic