jQuery Validate停止表单提交 [英] jQuery Validate stop form submit

问题描述

我正在使用jQuery对表单进行验证，但是当表单通过验证后，它会重新加载或提交页面，我想停止该操作.我已经使用了event.preventDefault()，但是它不起作用.

I am using jQuery validate to the form, but when the form is validated it reloads or submits the page I want to stop that action. I already use the event.preventDefault(), but it doesn't work.

这是我的代码:

$("#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;
});

推荐答案

submitHandler是插件内置的回调函数.

The submitHandler is a callback function built into the plugin.

submitHandler(默认:本机表单提交):

submitHandler (default: native form submit):

用于在表单有效时处理实际提交的回调.得到 该形式是唯一的参数.替换默认的提交.正确的 验证后可以通过Ajax提交表单的地方.

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

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

Since the submitHandler automatically captures the click of the submit button and only fires on a valid form, you do not need another submit handler, nor do you need to use valid() to test the form.

您的代码可以替换为:

$("#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
    }
});

这篇关于jQuery Validate停止表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！