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

jQuery でサポートされているセレクターは、セレクター API ページ にリストされています。:invalid疑似クラスは jQuery 1.9.0 の時点ではそこにリストされていないため、サポートされていないようです。そのセレクターがサポートされていない限り、サポートされるまでは、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 入力検証をサポートしていない古いブラウザーでこのコードを実行した場合に例外が発生しないように、テストを行いました。)

于 2013-02-04T21:56:20.650 に答える
0

私は今日この問題に取り組んでいましたが、無効なフォーム フィールドのテストと処理に 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 
            });
        }
});
于 2014-04-22T03:21:50.477 に答える