关联Google Sheet的表单提交弹窗失效及页面重载问题求助

问题分析 #

1. 表单符合必填要求提交后，数据成功存入Google Sheet，但页面直接重载，"Application Submitted!"弹窗未显示。
2. 表单填写不符合要求时，数据仍被存入Google Sheet，无"Error!"弹窗，页面同样重载，HTML原生验证规则失效。

核心原因 #

• 按钮为type="submit"，点击后触发表单默认提交行为，导致页面立即刷新，AJAX的success/error回调还未执行就被中断。
• 原代码未执行表单验证逻辑，直接发送AJAX请求，跳过了HTML原生的必填项、格式验证规则。

修复方案 #

方案1：修改原有函数，添加验证与阻止默认行为 #

调整JavaScript代码

function SubForm(event) {
    // 阻止表单默认提交行为，避免页面重载
    event.preventDefault();

    const form = document.getElementById('survey-form');
    // 执行HTML原生表单验证
    if (!form.checkValidity()) {
        // 弹出原生验证提示（如邮箱格式错误、必填项为空）
        form.reportValidity();
        alert("Error!");
        return;
    }

    // 验证通过后发送AJAX请求
    $.ajax({
        url:'[你的Google Sheet接口URL]',
        type:'post',
        data:$("#survey-form").serializeArray(),
        success: function(){
            alert("Application Submitted!");
            // 可选：验证成功后重置表单
            form.reset();
        },
        error: function(){
            alert("Error!");
        }
    });
}

调整按钮HTML代码

<button onclick="SubForm(event)" class="btn submit" type="submit">Let's Bop!</button>

方案2：监听表单submit事件（更推荐） #

这种方式更符合表单交互逻辑，无需依赖按钮的onclick属性。

调整JavaScript代码

$(document).ready(function() {
    $("#survey-form").submit(function(event) {
        // 阻止默认提交行为
        event.preventDefault();

        // 执行原生表单验证
        if (!this.checkValidity()) {
            this.reportValidity();
            alert("Error!");
            return;
        }

        // 发送AJAX请求
        $.ajax({
            url:'[你的Google Sheet接口URL]',
            type:'post',
            data:$(this).serializeArray(),
            success: function(){
                alert("Application Submitted!");
                // 重置表单
                $("#survey-form")[0].reset();
            },
            error: function(){
                alert("Error!");
            }
        });
    });
});

调整按钮HTML代码（移除onclick）

<button class="btn submit" type="submit">Let's Bop!</button>

修复效果 #

• 表单验证不通过时：触发HTML原生验证提示，弹出"Error!"弹窗，不会提交数据到Google Sheet。
• 表单验证通过时：数据存入Google Sheet后，弹出"Application Submitted!"弹窗，页面不会重载。

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