6

コードの事実:

  1. jQueryを使用しています
  2. jQuery Validate プラグインも使用

私のフォームの特徴:

  1. 2 つの部分に分割されたフォームがあります。すべて 1 つのフォームですが、2 つの大きな div で分割されています
  2. フォームの要点 (名、姓など) は最初の部分にあります。
  3. また、フォームの最初の部分に動的なテーブルがあるので、人々は自分自身と最大 20 人の他の人を登録できます。
  4. 最後に、登録コードがあります。これらのコードは 20 回までしか使用できません。つまり、1 人が自分自身を登録し、他の 19 人が登録コードtestを使用して登録した場合、それで終わりです。test は使用可能な登録コードではなくなります。

問題：

登録コードtestがすでに 18 回使用されているとします。そのため、バリデーターは自分自身とさらに 2 人のユーザーを登録すると正常に機能し、制限を超えているというメッセージがポップアップ表示されます。ただし、最初にコードを入力してtestから 2 人を追加すると、フォームが true であることが検証され、次に進みます。バリデーターのルール内の登録コードのコードは次のとおりです。

regis_code: {
    required: true,
    reg_code: true,         
    remote: { 
        url: "Private/Code_checker.php", 
        data: {
            num: function() {
               return num_rows;
            },
            },
        async: false 
    }
}

したがって、phpスクリプトは問題なく動作します。私がする必要があるのは、彼らがフォームに記入している間に検証することですが、送信する直前にも検証します。もう 1 つの問題は、フォームの最初の部分のボタンが送信ボタンではなく、現在の div を非表示にし、フォームの次の div (パート 2) を表示するボタンにすぎないことです。入力中に検証し、ボタンをクリックしてパート 2 に進むときにも検証するにはどうすればよいですか?

ボタンのコードとバリデーターの内容は次のとおりです。

$('.button2').click(function() {
    if(val.form()) {
        $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
        $('div.box label').animate({width: '-=100%'},500);
        $('#part1').fadeOut('slow', function() {
            $('#part2').fadeIn('slow');
        });
        $('#PaySubmit').fadeIn('slow');
    }
});
var val = $('#everything').validate({...});
4

2 に答える 2

3

すべての詳細を理解しているかどうかはわかりませんが、ボタンをクリックするたびにフォーム上のプラグインを再初期化するだけな.validate()ので、クリック ハンドラー内で呼び出すべきではありません。.validate()

.validate()- DOM の準備ができたら、プラグインを (オプションを使用して) 初期化します。

.valid()- 検証状態 (ブール値) を確認するformか、いつでも検証します。

コードを次のように変更します。#everythingおそらく、あなたは送信ボタンではないため、ボタンはフォームを送信し.button2ません。ただし、クリックする.button2と、フォームが検証に合格したかどうかがチェックされ、その条件が true の場合は残りの機能が実行されます。

$(document).ready(function() {

    $('#everything').validate({ // initialize validation plugin once
        // options
    }); 

    $('.button2').click(function() {
        if( $('#everything').valid() ) { // check if form passes validation
            $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
            $('div.box label').animate({width: '-=100%'},500);
            $('#part1').fadeOut('slow', function() {
                $('#part2').fadeIn('slow');
            });
            $('#PaySubmit').fadeIn('slow');
        }
    });

});

上記の有用な情報を考えると、2 つの異なるformタグ セットを使用すると、システムがより適切に機能すると思います。さまざまな検証オプションの利点があり、2 ステップ システムの柔軟性が向上する可能性があります。

.validation()独自のオプションを使用して、両方のフォームにセットアップします。次に、ボタンを使用して最初のフォームをチェックし (submitHandler:送信なし)、2 番目のフォーム内の関数を利用して両方のフォームを送信します。両方のフォームを送信する必要がない/送信したくない場合は、フォーム 1 の値を取得し、非表示inputの要素にコピーしてフォーム 2 と一緒に送信する関数を作成できます。

このようなもの...

$(document).ready(function() {

    $('#form1').validate({ // setup form 1 validation but leave out both submitHandler and submit button.
        // options
    });  

    $('#button').click(function() {  // setup button to check validation state of form 1 and reveal form 2 if true.
        if ( $('#form1').valid() ) {
            // do stuff, reveal your other form, etc.
        }
    });

    $('#form2').validate({  // setup form 2 validation and use submitHandler to take care of submission of one or both sets of data.
        // options,
        submitHandler: function(form) {
            $('#form1').submit();  // alternatively copy the values from form 1 and include in form 2's submission
            $(form).submit();      // submit this form (#form2)
        } 
    });

});
于 2012-12-03T22:01:05.373 に答える
2

valid()このメソッドはいつでも使用できるため（validate()呼び出されている場合は...）、フォームを送信するときにフォームの検証を強制できます。

if (!$("#everything").valid()) {
  // do whatever you need to do
  return false;     // cancel the submit
}

追加の人数が選択されているフィールドにイベントハンドラーをアタッチしたり、新しい人物を動的に追加して同じ方法を使用したりすることもできます。

編集：代わりvalid()に、フォーム全体ではなく、特定のフォームフィールドをチェックすることもできます。

$("#everything").validate().element("#reg_code");
// assuming that the registration code field has an ID called reg_code
于 2012-12-03T21:38:13.707 に答える