jQuery支持":invalid"选择器

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之后停止工作）。

- jldupont

---

自定义验证器在 jQuery 1.8 之后不受支持。 - karthikr

这可能会有所帮助 http://stackoverflow.com/questions/7815951/jquery-invalid-html-5-form-with-required-select-element - Justin Bicknell

那是CSS不是JavaScript，jQuery将一些CSS伪选择器重新创建为表达式以方便您使用，但这不是其中之一。 - adeneo

@JanDvorak - 只需要测试一下 -> FIDDLE，它确实可以正常工作，所以您应该将其发布为答案。 - adeneo

这明显是一个1.9版本的问题。如果你使用不同版本的jQuery测试这个网址：http://jsfiddle.net/L4g99/，在1.9版本下它将停止工作。我不确定这是否显而易见。 - Ian

Answer 1

如@JanDvorak所建议的使用querySelectorAll（他的回答应该被接受），您可以编写自己的表达式，使.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

- adeneo

---

抱歉，我写答案花了一些时间。 - John Dvorak

你的更好。点赞。 - John Dvorak

不支持IE<10。语法错误。 - Damien C

document.querySelectorAll(':invalid') 在 IE9 下给我返回 "语法错误"，尽管我已经使用了 X-UA-Compatible IE=Edge - 有什么建议吗？ - mavili

IE9完全不支持HTML5表单验证，因此:invalid选择器无法工作-> http://caniuse.com/#feat=form-validation - adeneo

Answer 2

:invalid 确实不是一个有效的 jQuery 选择器（伪类）。

然而，根据 你发布的链接，它是一个有效的 CSS 选择器（不支持 IE<10）。

Adeneo 的示例代码 显示，正如我们怀疑的那样，虽然它在 jQuery 中不起作用，但可以通过本地的 querySelector/querySelectorAll 方法来使用。因此，虽然下面的代码无法运行：

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

这在IE<10中不起作用：

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

这也应该可以工作（在未来或进行必要的shimming之后，参见caniuse）：

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

- John Dvorak

---

+1，我不确定是否应该发布一个答案，因为这应该是给你的。我从来没有想过原生的querySelector会对此起作用。 - adeneo

@adeneo 是你写的那个小把戏。 - John Dvorak

是的，但那主要是从 MDN 复制/粘贴而来。在这里，SO 上有机会成为创意人！ - adeneo

@adeneo 你还展示了如何使用自定义伪类扩展jQuery。 - John Dvorak

我已确认上述内容，但很惊讶这个有效：$(':invalid') -- 打印所有非法元素。 - Madbreaks

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


});

- Nikita Malyavin