1

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

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

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

由于插件有一个内置的submitHandler回调函数，它完全不需要在任何其他submit处理函数中包装任何东西。（回调仅针对有效表单触发，根据文档，“在验证后通过 Ajax 提交表单的正确位置。”）

恕我直言，这整个方法不必要地混乱和冗长，应该被替换。

而不是相同form的两组不同的输入，这需要更复杂的代码来动态添加和删除规则，您应该简单地使用两种不同的形式。

像这样的东西：

新的 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 回答