JQuery AJAX表单验证问题：return false未生效致表单非法提交

核心原因 #

你的return false写在$.post的回调函数里，但$.post是异步AJAX请求——外层的ValidateMyForm函数在发送请求后会立即执行完毕，回调里的return false只能终止回调本身，根本没法阻止表单的默认提交行为。

解决方案 #

先阻止表单的默认提交，等异步验证完成后，再根据结果决定是否手动提交表单。以下是两种实现方式：

方式1：修改原有函数，配合事件阻止默认行为

首先修改表单的onsubmit绑定，传入事件对象：

<form name="MyForm" onsubmit="ValidateMyForm(event); return false;">
  <!-- 表单元素 -->
</form>

然后更新验证函数：

function ValidateMyForm(event) {
    // 先阻止表单默认提交
    event.preventDefault();
    
    var MFormFieldCategoryName = document.forms["MyForm"]["FormFieldCategoryName"].value;
    var targetForm = document.forms["MyForm"];

    $.post("category_lookup_existing.cfm", {
            MFormFieldCategoryName: MFormFieldCategoryName
        },
        function(data) {
            alert("Existing Records = " + data);
            // 验证1：内容已存在
            if (data > 0) {
                alert('Found existing entry')
                $('#FormFieldCategoryNameID').val("");
                return; // 终止回调，不提交
            }
            
            // 验证2：输入为空
            if (MFormFieldCategoryName === "") {
                alert("Please Input a Category Name.");
                $('#FormFieldCategoryNameID').focus().css({
                    "background-color": "#fff2e6"
                });
                return; // 终止回调，不提交
            }
            
            // 所有验证通过，恢复输入样式并手动提交表单
            $('#FormFieldCategoryNameID').css({
                "background-color": "#fff"
            });
            ShowSavingv2('L');
            targetForm.submit();
        });
}

方式2：用jQuery绑定提交事件（更规范）

如果项目已经引入jQuery，推荐用这种方式绑定事件，避免内联脚本：

$(function() {
    $("form[name='MyForm']").on("submit", function(event) {
        event.preventDefault(); // 阻止默认提交
        var $form = $(this);
        var categoryName = $form.find("[name='FormFieldCategoryName']").val();

        $.post("category_lookup_existing.cfm", {
                MFormFieldCategoryName: categoryName
            },
            function(data) {
                alert("Existing Records = " + data);
                
                if (data > 0) {
                    alert('Found existing entry');
                    $('#FormFieldCategoryNameID').val("");
                    return;
                }
                
                if (!categoryName.trim()) {
                    alert("Please Input a Category Name.");
                    $('#FormFieldCategoryNameID').focus().css({
                        "background-color": "#fff2e6"
                    });
                    return;
                }
                
                // 验证通过，提交表单
                $('#FormFieldCategoryNameID').css({
                    "background-color": "#fff"
                });
                ShowSavingv2('L');
                $form.unbind('submit').submit(); // 解除绑定后提交，避免循环触发
            });
    });
});

注意事项 #

• 不要用同步AJAX（async: false），会导致页面阻塞，影响用户体验。
• 可以优化弹窗提示为更友好的页面内提示，替代alert提升体验。

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