如何用HTMX验证表单提交？JS验证返回false仍提交问题求助

HTMX会接管表单的提交流程，原生onsubmit返回false无法阻止HTMX发起请求，需要通过HTMX自身的事件机制实现验证拦截，以下是两种可行方案：

方案一：通过hx-on::submit绑定验证函数 #

修改表单的事件绑定，直接使用HTMX的submit事件，并在验证函数中根据结果决定是否阻止请求：

表单代码 #

<form id="assessment" name="assessment" hx-post="/assessment-result.php"
    hx-target=".questions_list" hx-swap="outerHTML transition:true swap:200ms"
    hx-on::submit="return checkAnswers(event)">
    <!-- 表单内容 -->
</form>

验证函数代码 #

function checkAnswers(event) {
    // 替换为你的实际验证逻辑，比如检查输入是否合法
    const invalid = false; 

    if (invalid) {
        alert('Invalid form');
        // 阻止HTMX发起请求
        event.preventDefault();
        return false;
    }
    // 验证通过，HTMX将正常提交表单
    return true;
}

方案二：监听htmx:beforeRequest事件拦截请求 #

利用HTMX提供的htmx:beforeRequest事件，在请求发起前执行验证，不通过则取消请求：

表单代码 #

<form id="assessment" name="assessment" hx-post="/assessment-result.php"
    hx-target=".questions_list" hx-swap="outerHTML transition:true swap:200ms">
    <!-- 表单内容 -->
</form>

验证脚本代码 #

document.getElementById('assessment').addEventListener('htmx:beforeRequest', function(event) {
    // 替换为你的实际验证逻辑
    const invalid = false;

    if (invalid) {
        alert('Invalid form');
        // 取消HTMX请求
        event.preventDefault();
    }
});

两种方案中，方案二更贴合HTMX的事件生命周期，推荐使用。

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