:无效和:所需的CSS伪类在选择器与多个表单元素匹配时,不适用于jQuery Travering方法 [英] :invalid and :required CSS pseudo-classes don't work with jQuery traversing methods when selector matches multiple form elements
问题描述
HTML
<input required>
<input required>
<input required>
JavaScript
/*
// Add script for noted :invalid check to work
// :required can also be made to work by modifying script, i.e. changing "invalid" to "required" where noted
// Source: http://stackoverflow.com/a/15821264/2171842
jQuery.extend(jQuery.expr[':'], {
invalid : function(elem, index, match){ // modify pseudo-class here
var invalids = document.querySelectorAll(':invalid'), // modify pseudo-class here
result = false,
len = invalids.length;
if (len) {
for (var i=0; i<len; i++) {
if (elem === invalids[i]) {
result = true;
break;
}
}
}
return result;
}
});
*/
$(document).ready(function(){
// works
console.log("number of invalid elements: "+$(":invalid").length); // selector matches multiple elements
console.log("is first element invalid? "+$("input:first").is(":invalid")); // selector matches one element
console.log("is at least one element enabled? "+$("input").is(":enabled")); // selector matches multiple elements
// fails without additional script, :required also fails
console.log("is at least one element invalid? "+$("input").is(":invalid")) // selector matches multiple elements
console.log("number of invalid elements: "+$("input:first").siblings(":invalid").andSelf(":invalid").length) // selector (siblings(":invalid")) matches multiple elements
});
控制台错误:未捕获的错误:语法错误,无法识别的表达式:不支持的伪:无效
.按照代码中的注释来导航问题.这是错误还是 jQuery 中不受支持的功能?
Console error: Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: invalid
. Follow comments in code to navigate problem. Is this a bug or just an unsupported feature in jQuery?
小提琴
https://jsfiddle.net/cbqdp43s/
推荐答案
这是一个错误还是 jQuery 中不受支持的功能?
Is this a bug or just an unsupported feature in jQuery?
不支持的功能.:invalid
, :required
不是 jQuery 扩展选择器.请参阅类别:jQuery 扩展
Unsupported features. :invalid
, :required
are not a jQuery extended selectors . See Category: jQuery Extensions
虽然 有属性选择器 [name] $("[required]")
应该返回具有 required
属性的元素的预期结果.
Though Has Attribute Selector [name] $("[required]")
should return expected results for element having required
attribute.
:invalid
CSS 伪类表示任何 或
内容无法根据输入类型验证的元素设置.
The
:invalid
CSS pseudo-class represents any<input>
or<form>
element whose content fails to validate according to the input's type setting.
这篇关于:无效和:所需的CSS伪类在选择器与多个表单元素匹配时,不适用于jQuery Travering方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!