jQuery wsparcie ": nieprawidłowy" selektor

Question

otrzymuję następujący komunikat konsola:

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

Kiedy próbuję coś takiego:

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

Jak mogę rozwiązać ten problem?

Oto przykład: http://jsfiddle.net/L4g99/ - spróbuj zmienić wersję jQuery (przestaje działać po 1,9)

Answer 1

Korzystanie querySelectorAll jak sugeruje @JanDvorak (i ​​jego odpowiedź powinna być przyjęta do myślenia o tym), można napisać własny wyrażenie, dzięki czemu .is(':invalid') jest ważne?

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

teraz można zrobić:

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

FIDDLE

Answer 2

:invalid jest, rzeczywiście, nie jest poprawnym selektor jQuery (pseudoclass).

Jednak zgodnie z the link you posted jest to prawidłowy selektor CSS (nieobsługiwany w IE < 10).

A fiddle by Adeneo pokazuje, że zgodnie z podejrzeniami, mimo że nie działa w jQuery, może być używany przez natywne metody querySelector/querySelectorAll. Tak więc, choć to nie działa:

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

ta ma (z wyjątkiem IE < 10):

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

To powinno działać, jak również (w przyszłości lub po neccessary podkładek, patrz caniuse):

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

Answer 3

można użyć elementu validity atrybut (patrz MDN).

Teraz łącząc ją z ideą @ adeneo za:

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


});