使用 jQuery 选择无效的 HTML5 输入

Question

由于 CSS:invalid选择器是输入的默认值，因此仅当用户对输入进行更改且输入仍然无效时，我才需要使用 jQuery 来更改无效输入的样式。我已经尝试了很多方法，但似乎:invalid选择器在 jQuery 中不可用。

这：

$("#formulaire input").change(function () {
    if ($(this).is(":invalid")) {
        $(this).css("backgroundColor", "red");
    }
})

不起作用。我还尝试在开始时选择无效的输入：

$("#formulaire input:invalid").change(function () {
    $(this).css("backgroundColor", "red");
})

但这也行不通。

希望你能够帮助我:)。

jsFiddle： http: //jsfiddle.net/TWQgN/

Answer 1

选择器 API 页面上列出了 jQuery 支持的选择器。从 jQuery 1.9.0 开始，伪:invalid类并未列出，因此似乎不受支持。除非该选择器受支持，否则您可以访问 DOM 对象并使用其输入有效性 API。例如：

$("#formulaire input").change(function() {
    if (Boolean($(this)[0].checkValidity) && (! $(this)[0].checkValidity())) {
        $(this).css("backgroundColor", "red");
    }
});

$(this)[0]返回底层DOM HTMLInputElement对象。checkValidity()如果输入元素无效，该方法将返回 false。（我进行测试Boolean($(this)[0].checkValidity)只是为了让您在不支持 HTML 输入验证的旧浏览器上运行此代码时不会出现异常。）