jQuery验证停止表单提交

Question

我正在使用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;
});

Answer 1

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

Answer 2

我将这个基本结构用于我的所有JS验证,它可以满足您的要求

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

你不需要e.preventDefault();和return false;声明,他们做同样的事情.