带onclick校验的表单按钮未触发formaction，触发默认Action的问题解决

场景复现 #

表单默认Action为AccPay/SavePay，其中Accept按钮单独设置了formaction="/AccPay/AcceptPay?redirect=@ViewBag.redirectPath"，但点击按钮时会触发表单默认的SavePay接口，而非按钮指定的AcceptPay。移除按钮的onclick事件后，按钮可正常触发AcceptPay。

相关代码 #

HTML代码

<form id="form1" asp-controller="AccPay" asp-action="SavePay" asp-route-redirect=@ViewBag.redirectPath>
    <button type="submit" id="accept" value="Accept" formaction="/AccPay/AcceptPay?redirect=@ViewBag.redirectPath" 
            onclick="return checkDateValidation1('@ViewBag.redirectPath')">
        Accept<i class="fa fa-arrow-circle-right padding-left"></i>
    </button>
    <!-- 表单内其他带独立formaction的按钮 -->
</form>

JavaScript代码

function checkDateValidation1(redirect) {
    debugger;
    
    // 自定义校验逻辑
    if (somecondition) {
        openConfirmationModal()
        return false;
    }
    return true;
}

// 打开确认弹窗
function openConfirmationModal(isPast) {
    if (isPast) $("#confirmationModal p:first").text(PAST_INVOICEDATE_MESSAGE)
    else $("#confirmationModal p:first").text(FUTURE_INVOICEDATE_MESSAGE)
    $('#confirmationModal').openModal({ dismissable: false });
}

$("#confirmInvoiceDateButton1").on('click', function () {
   return true;
})

$("#cancelInvoiceDateButton").on('click', function () {
    return false;
})

问题原因 #

当校验触发弹窗时，checkDateValidation1返回false，直接阻止了按钮的默认提交行为；而弹窗确认按钮的return true只是该按钮自身的返回值，无法关联到原Accept按钮的提交流程，导致原按钮的formaction逻辑完全中断，后续没有触发对应接口的提交。

解决方案 #

修改校验和弹窗确认的逻辑，手动触发按钮指定的formaction提交：

修改后的JavaScript代码 #

function checkDateValidation1(redirect) {
    debugger;
    
    // 自定义校验逻辑
    if (somecondition) {
        openConfirmationModal();
        // 阻止默认提交，而非直接返回false中断流程
        event.preventDefault();
        return false;
    }
    return true;
}

// 打开确认弹窗
function openConfirmationModal(isPast) {
    if (isPast) $("#confirmationModal p:first").text(PAST_INVOICEDATE_MESSAGE)
    else $("#confirmationModal p:first").text(FUTURE_INVOICEDATE_MESSAGE)
    $('#confirmationModal').openModal({ dismissable: false });
}

$("#confirmInvoiceDateButton1").on('click', function () {
    const acceptBtn = document.getElementById('accept');
    const form = document.getElementById('form1');
    // 暂存表单原Action，避免影响其他按钮
    const originalAction = form.action;
    // 将表单Action替换为按钮指定的formaction
    form.action = acceptBtn.formaction;
    // 手动提交表单
    form.submit();
    // 恢复表单原Action（可选）
    form.action = originalAction;
    // 关闭弹窗
    $('#confirmationModal').closeModal();
})

$("#cancelInvoiceDateButton").on('click', function () {
    $('#confirmationModal').closeModal();
})

逻辑说明 #

1. 触发弹窗时，使用event.preventDefault()阻止默认提交，保留后续手动提交的可能性，而非直接返回false完全中断流程。
2. 弹窗确认后，手动将表单的Action替换为Accept按钮指定的formaction，提交表单后恢复原Action，确保其他按钮的正常使用。

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