jQuery表单提交控制问题：Ajax校验后无法正确阻止或提交

表单代码 #

<form method="post" name="homeForm" id="homeForm" action="thank-you-page.php">

原jQuery代码 #

$("#homeForm").on("submit", function(e){

    var formData = new FormData(this);
    $.ajax({
        url: "email-check.php", 
        dataType: "json", 
        data: formData, 
        type: "POST", 
        cache: false, 
        contentType: false, 
        processData: false, 
        success: function(result){
    
            if(result.length > 0)
            {
                e.preventDefault();
                $('.modal').modal('show'); 
                return false;
            }
            {
                return true;
            }
    
        }
    });
});

需求与问题 #

需求：表单提交时通过AJAX调用接口校验，若返回结果长度大于0则阻止默认提交并显示模态框；若结果长度为0则携带POST数据跳转到感谢页面。

问题：

• 原代码中e.preventDefault()在AJAX的success回调里执行，由于AJAX是异步操作，此时表单已经完成默认提交跳转，无法及时阻止。
• 若将e.preventDefault()放在AJAX请求外，校验通过时又无法正常触发表单跳转。

更新尝试与错误 #

修改后的代码：

var formData = new FormData(this);
e.preventDefault();
$.ajax({
    url: "email-check.php", 
    dataType: "json", 
    data: formData, 
    type: "POST", 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function(result){

        if(result.length > 0)
        {
            $('.modal').modal('show'); 
        }
        {
            e.target.submit();
        }

    }
});

出现错误：未捕获的类型错误：e.submit 不是一个函数

解决方案 #

核心问题在于AJAX的异步特性，以及手动提交表单时需绕过jQuery的事件绑定避免循环。正确代码如下：

$("#homeForm").on("submit", function(e){
    // 先阻止默认提交行为，避免异步校验未完成就跳转
    e.preventDefault();
    // 保存表单DOM元素的引用，避免回调中this指向变化
    const formElement = this;
    const formData = new FormData(formElement);
    
    $.ajax({
        url: "email-check.php",
        dataType: "json",
        data: formData,
        type: "POST",
        cache: false,
        contentType: false,
        processData: false,
        success: function(result){
            if(result.length > 0){
                // 校验不通过，显示模态框
                $('.modal').modal('show'); 
            } else {
                // 校验通过，调用原生submit方法提交表单（绕过jQuery事件绑定，避免循环触发）
                formElement.submit();
            }
        }
    });
});

关键说明： #

1. 先阻止默认提交：必须在事件触发时立即调用e.preventDefault()，因为AJAX是异步操作，等回调执行时表单已经完成默认提交。
2. 调用原生submit方法：使用formElement.submit()（原生DOM方法）而非$(formElement).submit()，后者会再次触发jQuery绑定的submit事件，导致无限循环。
3. 修复语法错误：原更新代码中缺少else关键字，导致无论校验结果如何都会执行提交操作，需补充else逻辑分支。

内容的提问来源于stack exchange，提问作者user979331