需要点击两次表单提交(AJAX)

Question

我创建了一个表单，提交时不需要页面刷新，并且包含验证。我的问题是我必须点击两次提交按钮才能发送表格。我猜问题与有关

submitHandler: function(form) {
$('.mainform').submit(function(){

我的问题是我想不出更好的方法来做这件事。我在下面包含了完整的JS：

$(document).ready(function() {
    $('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section'));
    $(".mainform").validate({
        // Rules for form validation
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                minlength: 10
            },
            services: {
                required: true
            },
            message: {
                required: true,
                minlength: 10
            },
            human: {
                required: true,
                range: [4, 4]
            }
        },
        // Messages for form validation
        messages: {
            firstname: {
                required: 'Please enter your first name'
            },
            lastname: {
                required: 'Please enter your last name'
            },
            email: {
                required: 'Please enter your email address',
                email: 'Please enter a VALID email address'
            },
            phone: {
                required: 'Please enter your phone number'
            },
            services: {
                required: 'Please enter the services you are looking for'
            },
            message: {
                required: 'Please enter your message'
            },
            human: {
                required: 'Please answer security question',
                range: 'That is incorrect'
            }
        },
        // Do not change code below
        errorPlacement: function(error, element) {
            error.appendTo(element.parent());
        },
        submitHandler: function(form) {
            $('.mainform').submit(function(){
                $.ajax({
                    url: 'toAction.php',
                    data: $(this).serialize(),
                    type: 'POST',
                    success: function(data) {
                        console.log(data);
                        $("#success").show().fadeOut(15000); //=== Show Success Message==
                    },
                    error: function(data) {
                        $("#error").show().fadeOut(15000); //===Show Error Message====
                    }
                });
                e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
            });
        }
    });
});

Answer 1

在提交处理程序中，您只需使用ajax请求来保存数据-提交表单时会调用submitHandler，因此无需注册另一个提交处理程序。此外，为了防止默认操作，您可以从提交处理程序返回false

$(document).ready(function () {
    $('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section'));
    $(".mainform").validate({
        // Rules for form validation
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                minlength: 10
            },
            services: {
                required: true
            },
            message: {
                required: true,
                minlength: 10
            },
            human: {
                required: true,
                range: [4, 4]
            }
        },
        // Messages for form validation
        messages: {
            firstname: {
                required: 'Please enter your first name'
            },
            lastname: {
                required: 'Please enter your last name'
            },
            email: {
                required: 'Please enter your email address',
                email: 'Please enter a VALID email address'
            },
            phone: {
                required: 'Please enter your phone number'
            },
            services: {
                required: 'Please enter the services you are looking for'
            },
            message: {
                required: 'Please enter your message'
            },
            human: {
                required: 'Please answer security question',
                range: 'That is incorrect'
            }
        },
        // Do not change code below
        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        },
        submitHandler: function (form) {
            $.ajax({
                url: 'toAction.php',
                data: $(form).serialize(),
                type: 'POST',
                success: function (data) {
                    console.log(data);
                    $("#success").show().fadeOut(15000); //=== Show Success Message==
                },
                error: function (data) {
                    $("#error").show().fadeOut(15000); //===Show Error Message====
                }
            });
            return false; //=== To Avoid Page Refresh and Fire the Event "Click"===
        }
    });
});