jQuery Validation需要执行两次相同的validation

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

这是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; }); }); 

这是我的forms：

 
 
 Nombre  e-mail  
 
 Contraseña  Confirma contraseña  
 
  

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')方法添加和删除任何规则。 请参阅此演示 ，其中第二次调用.validate()无效。

由于插件具有内置的submitHandler回调函数，因此完全无需在任何其他submit处理函数中包装任何内容。 （回调仅针对有效表单触发，并且根据文档是“在validation后通过Ajax提交表单的正确位置。” ）

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

而不是具有两个不同输入集的相同form ，这将需要更复杂的代码来动态添加和删除规则，您应该使用两种不同的forms。

像这样的东西：

新的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 ：

 
 
 Nombre  e-mail   
 
 
 
 Contraseña  Confirma contraseña   
  

工作演示： http ： //jsfiddle.net/rNM4v/