Question

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

此：

$("#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

jQuery支持的选择器列出on the selectors API page。从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对象。如果input元素无效，checkValidity()方法将返回false。（我在测试中Boolean($(this)[0].checkValidity)只是为了在没有支持HTML输入验证的旧版浏览器上运行此代码时不会出现异常。）

Answer 2

我今天正在研究这个问题，并且很难弄清楚如何使用Jquery进行测试和处理：无效的表单字段。我在此表单上运行ajax，以便用户可以提交评论，而不必离开他们所在的页面。因此，如果需要使用html5 require方法和模式匹配，我确保表单字段全部有效并完成。然后在jquery中，我发现在下列情况下它会计算我无效的字段数：

$('.containerClass').on('click', '#button', function(){
    var valid = $(this).closest('#form').find('input:invalid').length;
    if(valid > 0){
        alert("Almost there! Please finish the last " + valid + " required fields to complete your review");
    }
    else{
        $.ajax({ 
                //do stuff 
            });
        }
});

使用jQuery选择无效的HTML5输入

2 个答案: