preventDefault()无法阻止表单提交，ajax校验项目名时表单仍提交

根本原因 #

你写的event.preventDefault()放在了AJAX的success回调里，而$.ajax默认是异步执行的：表单提交事件触发后，AJAX请求发出去就会继续走完submit事件的所有同步逻辑，表单会直接提交、页面刷新。等服务器响应回来、success回调执行的时候，原来的提交事件早就结束了，此时调用preventDefault()没有任何效果。

推荐修复方案 #

先统一阻止表单默认提交，校验通过后再手动触发原生表单提交即可：

$( document ).ready(function() {
    // 校验项目名是否存在，存在则取消提交
    $('#add-project-form').on("submit", function(event){
        // 第一步：先直接阻止默认提交行为
        event.preventDefault();
        console.log("SUBMITTING...");
        let project_name = $('#project_ea').val();
        // 保存当前表单的原生DOM对象，后续提交用
        const nativeForm = this;
        $.ajax({
            url: "api/Projects/ProjectExists/" + project_name,
            type: "POST",
            dataType: "json",
            success: function(data){
                console.log(data);
                if (data == true){
                    // 项目名存在，直接展示错误提示
                    console.log("Submission Halted.");
                    $('#project-name-error').show();
                } else {
                    // 项目名不存在，调用原生表单submit方法提交
                    // 注意：原生submit方法不会触发jQuery绑定的submit事件，不会进入死循环
                    nativeForm.submit();
                }
            }
        }); 
    });
});

不推荐的临时修复方案 #

可以给AJAX配置async: false改成同步请求，阻塞页面直到请求返回，此时preventDefault()可以生效，但会导致请求过程中页面完全卡死，用户体验很差，仅可用于临时验证：

$.ajax({
    url: "api/Projects/ProjectExists/" + project_name,
    type: "POST",
    dataType: "json",
    async: false, // 新增这行改为同步请求
    success: function(data){
        // 原有逻辑
    }
})

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