jQuery 验证停止表单提交

我正在使用 jQuery 验证表单，但是当验证表单时，它会重新加载或提交页面，我想停止该操作。我已经使用了 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;
});

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

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

当表单有效时处理实际提交的回调。获取 形式作为唯一的参数。替换默认提交。正确的 验证后通过 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
    }
});