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;声明，他们会做同样的事情。

Answer 3

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

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

jQuery验证停止表单提交

3 个答案: