Question

我的工作形式是用户必须填写两个步骤，第一步他必须提供他的姓名和电子邮件，第二步他必须提供他选择的密码，所以我必须以相同的形式执行验证两次，它在第一步中成功，但在第二步中它只是被简单地忽略而且表格正在被提交。

这是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>

Answer 1

您的代码（为便于阅读而格式化）：

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

这里有一个关于这个插件如何工作的根本误解。 .validate()只能在DOM上调用一次，准备初始化插件。因此，通过您的代码，在单击按钮并且窗体可见之前，插件甚至不会被初始化。它永远不会在你的第二个表单上初始化，因为单击按钮时它还不可见（你的条件逻辑失败并且永远不会调用.validate()）。即使你可以修复这个逻辑“catch-22”，第二个.validate()中指定的新规则也不能以这种方式应用。在您第一次致电.validate()后，必须通过rules('add')和rules('remove')方法添加和删除任何规则。 See this demo第二次调用.validate()无效。

由于插件具有内置的submitHandler回调函数，因此完全无需在任何其他submit处理程序函数中包装任何内容。（回调仅针对有效表单触发，而as per documentation “是在验证后通过Ajax提交表单的正确位置。”）
恕我直言，这整个方法都是不必要的混乱和冗长，应该被替换。

而不是具有两组不同输入的相同form，这将需要更复杂的代码来动态添加＆amp;删除规则，您应该只使用两种不同的形式。

这样的事情：

新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/

jQuery Validation需要执行两次相同的验证

1 个答案: