0

jQuery MobileとjQueryvalidateを使用していますが、動作させるのに問題があります。これが私のこれまでのコードです。

$('#submit').on('click', function() {
    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });
});

これは機能しません。on clickイベントなしで検証を含めるだけでも試してみましたが、それも機能しません。アイデア？

更新：誰かがこれを見た場合、コードは問題ありません、マークアップにエラーがありました。それでもSparkyによる以下の素晴らしい答え。

4

1 に答える 1

5

あなたのコード:

$('#submit').on('click', function() { // <-- REMOVE this
    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });
});

.validate()DOM readyでフォームを初期化するために1 回だけ使用する必要があります。クリック ハンドラー内にプラグインの初期化を含めることは意味がありません。プラグインには、実際の検証テストをトリガーするすべてのイベント ハンドラーが組み込まれています。

プレーンな jQuery の例: http://jsfiddle.net/RmG2g/

$(document).ready(function() { 
    $("#page2 form").validate({ ... });
});

ただし、jQuery Mobile を使用しているため:

$(document).on('pageinit', function(){ // <-- you must use this to ensure the DOM is ready

    $("#page2 form").validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
    });

});

実際のデモ: http://jsfiddle.net/6FYyv/

jQuery Mobile の場合は、....を使用する必要があります。

$(document).on('pageinit', function(){

それ以外の

$(document).ready(function(){

参照: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

重要:$(document).bind('pageinit')ではなくを使用してください$(document).ready()

$(document).ready()jQuery で最初に学ぶことは、DOM が読み込まれるとすぐにすべてが実行されるように、関数内でコードを呼び出すことです 。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するために、pageinitイベントにバインドできます。

于 2013-02-24T22:24:35.473 に答える