jQuery的支持“:无效”选择(jQuery support “:invalid” selecto

2019-08-19 14:36发布

我得到以下控制台消息:

[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:

使用querySelectorAll通过@JanDvorak的建议(他的回答应该为这种想法被接受),你可以写你自己的表达,使.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') ){ ... }

小提琴



Answer 2:

:invalid ,着实不是一个有效的jQuery选择(伪类)。

根据您发布的链接 ,但是,它是一个有效的CSS选择器(在IE <10不支持)。

通过Adeneo小提琴显示,截至怀疑,虽然它没有在jQuery的工作,它可以通过本机使用querySelector / querySelectorAll方法。 所以,虽然这并不工作:

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

这确实(除了在IE <10):

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

这应该工作,以及(在未来或neccessary匀场后,看到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 support “:invalid” selector