如何强制关注第一个无效输入?
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 对话框时,如何避免自动关注第一个输入字段?