Поддержка jQuery ": недействительный" селектор

Ответ 1

Используя querySelectorAll, как было предложено @JanDvorak (и его ответ должен быть принят для размышления об этом), вы можете написать свое собственное выражение, сделав .is(':invalid') valid?

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

Ответ 2

:invalid, действительно, не является допустимым селектором jQuery (псевдослоем).

Согласно ссылка, которую вы опубликовали, однако это допустимый селектор CSS (не поддерживается в IE и 10).

Скрипка от Adeneo показывает, что, как и предполагалось, пока он не работает в jQuery, его можно использовать через native querySelector/querySelectorAll. Итак, пока это не работает:

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

Это делает (за исключением IE < 10):

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

Это должно работать также (в будущем или после необходимого обрезки, см. caniuse):

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

Ответ 3

Вы можете использовать атрибут element 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;
    }


});