jQuery hỗ trợ ": không hợp lệ" chọn

Question

Tôi nhận được thông báo giao diện điều khiển sau:

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

Khi tôi cố gắng một cái gì đó như:

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

Làm thế nào để sửa lỗi này?

Dưới đây là một ví dụ: http://jsfiddle.net/L4g99/ - hãy thử thay đổi phiên bản jQuery (ngừng hoạt động sau 1.9)

Answer 1

Sử dụng querySelectorAll theo đề nghị của @JanDvorak (và câu trả lời của ông nên được chấp nhận cho suy nghĩ về điều đó), bạn có thể viết riêng của bạn biểu hiện, làm cho .is(':invalid') hợp lệ?

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

bây giờ bạn có thể làm:

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

FIDDLE

Answer 2

:invalid là, quả thật vậy, không phải là một jQuery selector hợp lệ (pseudoclass). Tuy nhiên, theo số the link you posted, đây là bộ chọn CSS hợp lệ (không được hỗ trợ trong IE < 10).

A fiddle by Adeneo cho thấy rằng, như bị nghi ngờ, trong khi nó không hoạt động trong jQuery, nó có thể được sử dụng thông qua các phương pháp gốc querySelector/querySelectorAll. Vì vậy, trong khi điều này không làm việc:

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

này (ngoại trừ trong IE < 10):

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

này nên làm việc cũng như (trong tương lai hoặc sau shimming cần thiết, xem caniuse):

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

Answer 3

Bạn có thể sử dụng thuộc tính validity của phần tử (xem MDN).

Bây giờ kết hợp nó với ý tưởng @ adeneo của:

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


});