jQuery Unterstützung ": ungültig" Selektor

Question

erhalte ich die folgende Konsolenmeldung:

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

Wenn ich versuche, so etwas wie:

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

Wie behebe ich das?

Hier ist ein Beispiel: http://jsfiddle.net/L4g99/ - versuchen, die jQuery-Version zu wechseln (stoppt nach 1,9 Arbeits)

Answer 1

Mit querySelectorAll von @JanDvorak vorgeschlagen, wie (und seine Antwort sollte denken, dass angenommen werden), können Sie Ihre eigenen schreiben Ausdruck, machen .is(':invalid') gültig?

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

jetzt können Sie tun:

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

FIDDLE

Answer 2

:invalid sind in der Tat keine gültigen jQuery-Selektor (Pseudoklasse).

Laut the link you posted ist es jedoch ein gültiger CSS-Selektor (nicht unterstützt in IE < 10).

A fiddle by Adeneo zeigt, dass, wie vermutet wird, während es nicht in jQuery funktioniert, kann es über die nativen querySelector/querySelectorAll Methoden verwendet werden. Also, während das nicht funktioniert:

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

Dies gilt (außer in IE < 10):

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

Dies sollte auch funktionieren (in der Zukunft oder nach dem notwendigen Shim, siehe caniuse):

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

Answer 3

Sie validity Attribut des Elements verwenden können (siehe MDN).

Jetzt ist es mit @ adeneo Idee kombiniert:

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


});