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

Posted

技术标签:

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

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

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

$("input:first:invalid").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>

【讨论】:

以上是关于如何强制关注第一个无效输入?的主要内容,如果未能解决你的问题,请参考以下文章

即使输入文本有效(Javascript或Jquery),如何强制输入文本无效

将 HTML 表单弹出为 JQuery 对话框时,如何避免自动关注第一个输入字段?

如何强制getline()一次输入一行[重复]

第 1 行错误的 CSV 输入中的列数无效(已检查其他问题)

第 1 行的 CSV 输入中的字段计数无效

如何强制返回按钮转到第一个视图控制器(swift)