jQuery 支持 ":invalid" 选择器答案

【问题标题】：jQuery support ":invalid" selectorjQuery 支持 ":invalid" 选择器
【发布时间】：2013-04-04 20:09:43
【问题描述】：

我收到以下控制台消息：

[16:04:01.292] Error: Syntax error, unrecognized expression: unsupported pseudo: invalid @ http://localhost:8080/assets/js/jquery-1.9.1.min.js:4

当我尝试类似：

if( $(e.target).is(':invalid') ){ ... }

我该如何解决这个问题？

这是一个示例：http://jsfiddle.net/L4g99/ - 尝试更改 jQuery 版本（1.9 后停止工作）

【问题讨论】：

jquery 1.8 之后不支持自定义验证器
这可能会有所帮助stackoverflow.com/questions/7815951/…
那是 CSS 而不是 javascript，并且 jQuery 重新创建了一些 CSS 伪选择器作为表达式以方便您使用，这不是这些选择器之一
也许你需要通过querySelectorAll来使用它，因为它是一个CSS选择器，而不是一个jQuery选择器
这绝对是1.9的问题。如果您使用不同的 jQuery 版本对此进行测试 - jsfiddle.net/L4g99，它将停止使用 1.9。我不确定这是否明显

标签： javascript jquery html jquery-selectors

【解决方案1】：

按照@JanDvorak 的建议使用querySelectorAll（考虑到这一点，他的回答应该被接受），您可以编写自己的表达式，使.is(':invalid') 有效？

jQuery.extend(jQuery.expr[':'], {
    invalid : function(elem, index, match){
        var invalids = document.querySelectorAll(':invalid'),
            result = false,
            len = invalids.length;

        if (len) {
            for (var i=0; i<len; i++) {
                if (elem === invalids[i]) {
                    result = true;
                    break;
                }
            }
        }
        return result;
    }
});

现在你可以这样做了：

if( $(e.target).is(':invalid') ){ ... }

FIDDLE

【讨论】：

对不起；我花了一些时间来写我的答案。
你的更好。点赞。
无法在 IE 中醒来
document.querySelectorAll(':invalid') 在 IE9 下给我“语法错误”，即使我使用过 X-UA-Compatible IE=Edge - 有什么建议吗？
IE9 根本不支持 HTML5 表单验证，因此 :invalid 选择器不起作用 -> caniuse.com/#feat=form-validation

【解决方案2】：

:invalid 确实不是一个有效的 jQuery 选择器（伪类）。

然而，根据the link you posted，它是一个有效的 CSS 选择器（IE

A fiddle by Adeneo 表明，正如怀疑的那样，虽然它在 jQuery 中不起作用，但可以通过本机 querySelector/querySelectorAll 方法使用。所以，虽然这不起作用：

if($(e.target).is(":invalid"))  //SyntaxError

这样做（IE

if(~[].indexOf.call(document.querySelectorAll(":invalid"),e.target))

这应该也可以（在将来或在必要的匀场之后；参见caniuse）：

if(e.target.matches(":invalid"))

【讨论】：

+1，我不确定是否要发布答案，因为这应该交给你。我永远不会想到原生的 querySelector 会为此工作。
@adeneo 是你写的小提琴
是的，但这主要是从 MDN 复制/粘贴。在这里，是这个想法的人的空间！
@adeneo 您还展示了如何使用自定义伪类扩展 jQuery
我已经确认了上述内容，但很惊讶这有效：$(':invaild') -- 打印所有无效元素。

【解决方案3】：

您可以使用元素的validity 属性（参见MDN）。

现在将它与@adeneo 的想法结合起来：

jQuery.extend(jQuery.expr[':'], {
    invalid : function(elem, index, match){
        return elem.validity !== undefined && elem.validity.valid === false;
    },

    valid : function(elem, index, match){
        return elem.validity !== undefined && elem.validity.valid === true;
    }


});

【讨论】：