jQueryvalidation停止表单提交

我正在使用jQueryvalidation表单，但是当表单被validation时，它会重新加载或提交我要停止该操作的页面。 我已经使用了event.preventDefault（），但它不起作用。

这是我的代码：

$("#step1form").validate(); $("#step1form").on("submit", function(e){ var isValid = $("#step1form").valid(); if(isValid){ e.preventDefault(); // Things i would like to do after validation $(".first_step_form").fadeOut(); if(counter == 3){ $(".second_step_summary").fadeIn(); $(".third_step_form").fadeIn(); $(".third_inactive").fadeOut(); }else if(counter < 3){ $(".second_step_form").fadeIn(); $(".third_inactive").fadeIn(); } $(".first_step_summary").fadeIn(); $(".second_inactive").fadeOut(); } return false; }); 

Answer 1

submitHandler是插件中内置的回调函数。

submitHandler （默认：本机表单提交）：

当表单有效时，回调处理实际提交。 获取表单作为唯一参数。 替换默认提交。 在validation后通过Ajax提交表单的正确位置。

由于submitHandler自动捕获提交按钮的单击并仅在有效表单上触发，因此您不需要另一个提交处理程序，也不需要使用valid()来测试表单。

您的代码可以替换为：

 $("#step1form").validate({ submitHandler: function(form) { // Things I would like to do after validation $(".first_step_form").fadeOut(); if(counter == 3){ $(".second_step_summary").fadeIn(); $(".third_step_form").fadeIn(); $(".third_inactive").fadeOut(); }else if(counter < 3){ $(".second_step_form").fadeIn(); $(".third_inactive").fadeIn(); } $(".first_step_summary").fadeIn(); $(".second_inactive").fadeOut(); return false; // block the default submit action } }); 

Answer 2

我将这个基本结构用于我的所有JSvalidation，它可以满足您的要求

 $('#form').on('submit', function() { // check validation if (some_value != "valid") { return false; } }); 

你不需要e.preventDefault(); 并且return false; 声明，他们做同样的事情。

Answer 3

该插件为有效和无效的表单提交尝试提供回调。 如果您提供submitHandler回调，则表单不会自动提交给服务器。

 $("#step1form").validate({ submitHandler : function() { // the form is valid $(".first_step_form").fadeOut(); if(counter == 3){ $(".second_step_summary").fadeIn(); // etc } } });