Question

我收到以下控制台消息：

[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之后停止工作）

Answer 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

Answer 2

实际上，

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

然而，根据the link you posted，它是一个有效的CSS选择器（在IE＆lt; 10中不支持）。

A fiddle by Adeneo表明，虽然它在jQuery中不起作用，但它可以通过原生的querySelector / querySelectorAll方法使用。所以，虽然这不起作用：

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

这样做（IE＆lt; 10除外）：

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

这也应该有用（将来或在必要的垫片之后;见caniuse）：

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

Answer 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;
    }


});

jQuery支持＆＃34;：无效＆＃34;选择

3 个答案: