1

私は、ユーザーが 2 つの手順を入力する必要があるフォームで作業しています。最初の手順では、名前と電子メールを入力する必要があり、2 番目の手順では、選択したパスワードを入力する必要があるため、同じフォームで検証を 2 回実行する必要があります。最初のステップでは成功しましたが、2 番目のステップでは単純に無視され、フォームが送信されています。

これはjsコードです：

jQuery(document).ready(function() {
      jQuery('#form_wk_new_user').submit(function() {
       if(jQuery('#form_wk_step_1').css('visibility') == 'visible') {

           jQuery('#form_wk_new_user').validate(
           {
            rules: {
                new_user_name: {
                    required: true
                },
                new_user_email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                 new_user_name: {
                     required: 'requerido'
                 },
                 new_user_email: {
                      required: 'requerido',
                      email: 'correo no válido'
                 }   
            }
           }
         );
        if(jQuery('#form_wk_new_user').valid()) {
             jQuery('#form_wk_step_2').css('visibility','visible');
         }         
       }
       if(jQuery('#form_wk_step_2').css('visibility') == 'visible') {
             jQuery('#form_wk_step_1').css('visibility','hidden');
             jQuery('#form_wk_continue_btn').attr('value','Registrar');
             jQuery('#form_wk_new_user').validate(
                {
                 rules: {
                     new_user_pass: {
                         required: true
                     },
                     new_user_confirm_pass: {
                         required: true,
                         equalTo: '#new_user_pass'
                     }
                 },
                 messages: {
                      new_user_pass: {
                          required: 'requerido'
                      },
                       new_user_confirm_pass: {
                         required: 'requerido',
                         equalTo: 'contraseñas no coinciden'
                     }
                 }
                }

            );
           if(jQuery('#form_wk_new_user').valid()) {
            form.submit();
         }       
       } 
     return false; 
    });
});

そして、これは私のフォームです：

<form id="form_wk_new_user" method="post" action="">
    <div id="form_wk_step_1">
        <label>Nombre</label>
        <input type="text" id="new_user_name" name="new_user_name">
        <label>e-mail</label>
        <input type="text" id="new_user_email" name="new_user_email">
    </div>
    <div id="form_wk_step_2" style="visibility: hidden;">
        <label>Contraseña</label>
        <input type="password" id="new_user_pass" name="new_user_pass">
        <label>Confirma contraseña</label>
        <input type="password" id="new_user_confirm_pass" name="new_user_confirm_pass">
    </div>
    <div id="form_wk_continue"><input id="form_wk_continue_btn" type="submit" value="Continuar"></div>
</form>
4

1 に答える 1

4

あなたのコード（読みやすいようにフォーマットされています）：

jQuery(document).ready(function() {

    jQuery('#form_wk_new_user').submit(function() {
       if (jQuery('#form_wk_step_1').css('visibility') == 'visible') {

           jQuery('#form_wk_new_user').validate({ // initialize plugin
               //options & rules
           });

           if(jQuery('#form_wk_new_user').valid()) {
               jQuery('#form_wk_step_2').css('visibility','visible');
           }         
       }
       if (jQuery('#form_wk_step_2').css('visibility') == 'visible') {
           jQuery('#form_wk_step_1').css('visibility','hidden');
           jQuery('#form_wk_continue_btn').attr('value','Registrar');
           jQuery('#form_wk_new_user').validate({ // initialize plugin
              //options & rules
           });
           if(jQuery('#form_wk_new_user').valid()) {
               form.submit();
           }       
       }
       return false; 
    }); // end submit handler

}); // end DOM ready

このプラグインがどのように機能するかについて、根本的な誤解があります。 プラグインを初期化する準備ができているDOMで一度.validate()だけ呼び出されることになっています。したがって、コードでは、ボタンがクリックされてフォームが表示されるまで、プラグインは初期化されません。ボタンがクリックされたときにまだ表示されていないため、2 番目のフォームでは初期化されません (条件付きロジックが失敗し、呼び出されません)。この論理的な「catch-22」を修正できたとしても、2 番目に指定された新しいルールをこの方法で適用することはできません。初めて呼び出した後、およびメソッドを使用してルールを追加および削除する必要があります。 このデモを見る.validate().validate().validate()rules('add')rules('remove')への 2 番目の呼び出し.validate()は効果がありません。

プラグインには組み込みのコールバック関数があるため、他のハンドラー関数submitHandler内で何かをラップする必要がまったくありません。submit(コールバックは有効なフォームに対してのみ発生し、ドキュメントによると、「検証後に Ajax を介してフォームを送信する適切な場所です。」 )

IMHO、このアプローチ全体は不必要に面倒で冗長であり、置き換える必要があります。

formルールを動的に追加および削除するには、はるかに複雑なコードが必要になる 2 つの異なる入力セットと同じではなく、単純に 2 つの異なるフォームを使用する必要があります。

このようなもの：

新しい jQuery :

jQuery(document).ready(function() {

    jQuery('#form_wk_new_user1').validate({ // initialize plugin on form 1
        // options & rules for form 1,
        submitHandler: function (form) {
            jQuery('#form_wk_step_1').hide(); // hide step 1
            jQuery('#form_wk_step_2').show(); // show step 2
            return false; // stop normal submit event
        }
    });

    jQuery('#form_wk_new_user2').validate({ // initialize plugin on form 2
        // options & rules for form 2,
        submitHandler: function (form) {
            var result1 = jQuery('#form_wk_new_user1').serialize(); // get the contents of form 1
            var result2 = jQuery(form).serialize(); // get the contents of form 2
            // your code to combine the data from form 1 with form 2
            // your code to submit form with data, ajax or other
            // return false; // block a page redirect if you use ajax
        }
    });

}); // end DOM ready

新しい HTML :

<form id="form_wk_new_user1">
    <div id="form_wk_step_1">
        <label>Nombre</label>
        <input type="text" id="new_user_name" name="new_user_name"/>
        <label>e-mail</label>
        <input type="text" id="new_user_email" name="new_user_email"/>
        <input id="form_wk_continue_btn" type="submit" value="Continuar"/>
    </div>
</form>
<form id="form_wk_new_user2">
    <div id="form_wk_step_2" style="display: none;">
        <label>Contraseña</label>
        <input type="password" id="new_user_pass" name="new_user_pass"/>
        <label>Confirma contraseña</label>
        <input type="password" id="new_user_confirm_pass" name="new_user_confirm_pass"/>
        <input id="form_wk_continue_btn" type="submit" value="Registrar"/>
    </div>
</form>

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

于 2013-02-20T23:50:43.497 に答える