0

6 ページにわたってページ分割された (jQuery ajax スタイル) フォームを作成しました。jQuery検証プラグインを使用して動作させようとしています。

フォームの下部には、そのページの値をデータベースに送信し、jQuery .load() を使用して次の「ページ」を #pagination div にロードする「次へ」ボタンがあります。

jQuery 検証プラグインを使用して jQuery 検証をフォームに追加しましたが、検証が画面上で一瞬点滅し、とにかくページが次のページに移動します。どんな助けにも感謝します！検証が成功した場合はフォームを次のページに移動できるようにしたいのですが、失敗した場合は移動できません。これが私のコードです（できるだけ単純になるように煮詰めました）：

jQuery

jQuery(document).ready(function(){
    jQuery("#survey").validate();   
    var page=1; //Set first page on load
    jQuery("#pagination").load("survey_"+page+".htm");

    jQuery("#next").click(function(){

        if(page !== 6){
            page=page+1;}
        if(page == 6){
            jQuery('#next').replaceWith('<button id="submit" type="button">Submit</button>');
        }
        else
        {page == 6;}

    jQuery("#pagination").load("survey_"+page+".htm");
 });

HTML

<form class="survey" id="survey" method="post" action="">
    <div id="pagination">
</div>
<div class="nav"><input id="prev" type="submit" value="Previous" ><input class="submit" id="next" value="Next" name="submit" type="submit" /></div>
</form>

フォーム ページは、survey_1.htm、survey_2.html....survey_6.htm という名前の 6 つの個別のファイルにあり、上記のように、.load() を使用して読み込まれます。

前述のように、検証が成功した場合はフォームが次のページに移動できるようにしたいのですが、失敗した場合はそうではありません。現時点では、次のページが読み込まれる前に検証が画面上で点滅します。

どうもありがとう！

4

2 に答える 2

1

OP の引用: 「前述のとおり、検証が成功した場合はフォームを次のページに移動できるようにしたいのですが、失敗した場合はそうではありません。現時点では、次のページが読み込まれる前に検証が画面上で点滅します。 "

ページの読み込みロジックが検証プラグインの組み込みのクリック ハンドラーをバイパスしているため、次のページに移動しています。

ページの読み込みスキームが最終的にどのように機能するかは、私にはあまり明確ではありません。ただし、ajaxjQuery Validate プラグインと一緒に使用するには、組み込みのsubmitHandlerコールバック関数を利用します。つまり、submitHandlerフォームが検証テストに合格した場合にのみ関数が起動されます。

このようなもの...

jQuery(document).ready(function(){

    jQuery("#survey").validate({
        submitHandler: function(form) {
            // your ajax loading logic
            // form.submit(); // use this to finally submit form data at the last step
            return false;  // prevent form submit because you are doing the ajax
        }
    });

});

実際のデモ: http://jsfiddle.net/zpkm2/

コードにも注意してください：

else
    {page == 6;}

おそらく次のようになります。

else
    {page = 6;}

==は値の比較用、は値の設定=用です。

于 2013-02-11T17:23:32.227 に答える