如何使用HTMX处理表单提交错误并在指定容器展示错误信息

方案1：使用HTMX带外交换（推荐，无需额外编写JS） #

第一步：修改前端表单属性 #

仅需要给原有form标签新增hx-swap-on-error="true"属性，作用是告知HTMX即使请求返回错误状态码，依然执行内容交换逻辑：

<form  
 class="" id="form" 
 hx-post="/add/" 
 hx-swap="afterbegin" 
 hx-target="#big_list" 
 hx-trigger="submit"
 hx-swap-on-error="true"
>
    <input type="text" name="langue1" >
    <input type="text" name="langue2">
    <div id="errors"></div>
    <button type="submit">GO</button>
</form> 
<div id="big_list"> 
.....
</div>

第二步：后端按请求结果返回对应内容 #

后端根据表单校验结果分两种情况返回响应即可：

• 提交成功场景
  返回200状态码，响应内容仅为你要追加到列表的单条HTML片段，示例：

<li>新增列表项: langue1值 | langue2值</li>

HTMX会自动按照原有配置，把这段内容插入到#big_list的最开头，原有列表内容不会被修改，完全符合需求。

• 提交失败场景
  返回400状态码（或其他4xx系列错误码），响应内容仅需携带带hx-swap-oob属性的错误信息块：

<div id="errors" hx-swap-oob="true">
  <ul>
    <li>langue1字段不能为空</li>
    <li>langue2字段不能包含特殊字符</li>
  </ul>
</div>

带hx-swap-oob="true"的元素会被HTMX单独识别，直接匹配页面上相同ID的节点进行内容替换，且因为本次响应没有返回其他普通内容，#big_list不会发生任何改动，错误信息会直接显示到指定的#errors节点中，同时原有表单输入内容会保留，方便用户修改后重提。

方案2：使用自定义事件触发（适合需要额外JS逻辑的场景） #

如果你的错误处理需要配合其他前端交互，可以通过HTMX自定义事件实现：

1. 前端给表单绑定自定义错误事件监听：

document.getElementById('form').addEventListener('submitError', e => {
  document.getElementById('errors').innerHTML = e.detail.errorMsg
})

2. 后端校验失败时，返回400状态码，同时添加响应头HX-Trigger: {"submitError": {"errorMsg": "<ul><li>langue1不能为空</li></ul>"}}
3. 提交成功的逻辑和方案1完全一致。

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