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"===
        }

    });
});

需要在表单提交（AJAX）上单击两次

1 个答案: