2

由于 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/

4

2 回答 2

5

Selectors supported by jQuery are listed on the selectors API page. The :invalid pseudo-class is not listed there as of jQuery 1.9.0, so doesn't appear to be supported. Unless and until that selector is supported, you can access the DOM object and use its input validity API. For example:

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

$(this)[0] returns the underlying DOM HTMLInputElement object. The checkValidity() method will return false if the input element is invalid. (And I put in the test Boolean($(this)[0].checkValidity) just so that you do not get an exception if this code is run on an older browser that doesn't support HTML input validation.)

于 2013-02-04T21:56:20.650 回答
0

我今天正在研究这个问题，并且一直很难弄清楚如何使用 Jquery 来测试和处理 :invalid 表单字段。我在这个表单上运行 ajax，这样用户就可以提交评论而不必离开他们所在的页面。因此，如果需要使用 html5 要求方法和模式匹配，我会确保表单字段都是有效且完整的。然后在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 
            });
        }
});
于 2014-04-22T03:21:50.477 回答