JQuery поддержки ": недопустимый" Селектор

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

Использование 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')){ ... } 

FIDDLE

Answer 2

:invalid, действительно, не действительный селектор JQuery (pseudoclass).

В соответствии с the link you posted, однако, это допустимый селектор CSS (не поддерживается в IE < 10).

A fiddle by Adeneo показывает, что, как и предполагалось, в то время как он не работает в jQuery, его можно использовать с помощью собственных методов querySelector/querySelectorAll. Таким образом, в то время как это не работает:

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

Это (за исключением в IE < 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; 
    } 


});