表单提交时地址验证模态框闪显后自动提交问题排查

核心问题 #

你的表单提交逻辑卡在了异步验证与同步表单提交的冲突上：

• 原validateForm调用异步的validateAddress后，函数本身未返回任何值（等价于返回undefined），浏览器会直接判定验证通过并提交表单，这就是无效地址时模态框闪显后表单直接提交的原因。
• 最初直接return false的写法，虽然能阻止提交，但地址验证通过后无法自动触发表单提交，必须手动点击两次按钮。

具体修复步骤 #

1. 先彻底阻止表单默认提交行为 #

修改Razor生成的表单代码，在onsubmit里先返回false，彻底拦截默认提交，后续通过代码手动触发提交：

@using (Html.BeginForm(action, "appointments", routeValues, FormMethod.Post, new RouteValueDictionary(new { @id = "myForm", @name = "myForm", @class = "form-horizontal", onsubmit = "formHelper.validateForm(event, this); return false;" })))

2. 重构validateForm函数，适配异步验证 #

让函数先做必填项校验，再等待地址验证结果，验证通过后手动提交表单：

validateForm: function (event, form) {
    // 双重保险：阻止默认提交行为
    event.preventDefault();

    // 先执行必填字段校验（替换成你实际的必填项验证逻辑）
    const isRequiredValid = true; // 这里改成你的真实校验结果
    if (!isRequiredValid) {
        // 处理必填项错误提示，比如弹出提示框
        return;
    }

    // 执行异步地址验证，根据结果决定是否提交
    validateAddress().then(isAddressValid => {
        if (isAddressValid) {
            // 地址验证通过，手动提交表单
            form.submit();
        }
        // 验证不通过时，validateAddress里已经弹出模态框，无需额外操作
    });
}

3. 修改validateAddress函数，返回验证结果 #

让这个异步函数返回布尔值，明确告知调用方地址是否验证通过：

async function validateAddress() {
    const response = await fetch('https://addressvalidation.googleapis.com/v1:validateAddress?key=@googleApiKey', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            "address": {
                "regionCode": "US",
                "addressLines": [patientAddressLine.value],
                "locality": patientCity.value,
                "administrativeArea": patientStateCode.value,
                "postalCode": patientPostalCode.value
            },
            "enableUspsCass": true
        })
    });

    if (!response.ok) {
        console.log(response.status);
        return false; // 请求失败视为验证不通过
    }

    const data = await response.json();
    const responseAddress = data.result.address;
    const responseVerdict = data.result.verdict;
    const googleAddressLine = responseAddress.postalAddress.addressLines[0];
    const googleCity = responseAddress.postalAddress.locality;
    const googleState = responseAddress.postalAddress.administrativeArea;
    const googleZipcode = responseAddress.postalAddress.postalCode;
    const hasInferredComponents = responseVerdict.hasInferredComponents;
    const addressComplete = responseVerdict.addressComplete;
    const hasReplacedComponents = responseVerdict.hasReplacedComponents;
    const hasUnconfirmedComponents = responseVerdict.hasUnconfirmedComponents;
    const missingComponentTypes = responseAddress.missingComponentTypes;

    // 判断是否需要弹出模态框阻止提交
    if (hasInferredComponents || !addressComplete || hasReplacedComponents || missingComponentTypes) {
        populateModalValues(googleAddressLine, googleCity, googleState, googleZipcode, missingComponentTypes, hasInferredComponents, hasReplacedComponents);
        recommendedChangesModal.showModal();
        return false;
    } else if (hasUnconfirmedComponents) {
        populateModalValidationIssues(responseAddress.unconfirmedComponentTypes);
        addressVerificationModal.showModal();
        return false;
    } else {
        addressConfirmed.value = 'true';
        return true; // 地址验证通过
    }
}

4. 处理模态框的确认逻辑 #

给模态框的确认按钮添加点击事件，更新表单字段后手动提交：

// 推荐地址模态框的确认按钮
document.getElementById('confirm-recommended-address').addEventListener('click', () => {
    // 更新表单中的地址字段为推荐值
    patientAddressLine.value = googleAddressLine;
    patientCity.value = googleCity;
    patientStateCode.value = googleState;
    patientPostalCode.value = googleZipcode;
    // 关闭模态框并提交表单
    recommendedChangesModal.close();
    document.getElementById('myForm').submit();
});

// 地址无法验证时的确认按钮（允许用户继续提交）
document.getElementById('proceed-with-invalid-address').addEventListener('click', () => {
    addressVerificationModal.close();
    addressConfirmed.value = 'true';
    document.getElementById('myForm').submit();
});

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