使用HTMX处理错误

Question

<form  
 class="" id="form" hx-post="/add/" hx-swap="afterbegin" hx-target="#big_list" hx-trigger="submit">
    <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>

我在#big_list中有一个很大的列表，我希望我的#form在提交时只追加一行。

如何使用htmx处理错误并在#errors中显示消息？

Answer 1

尽管它不遵循REST原则，但您可以考虑使用swap-oob将错误报告给您的用户。例如，您的请求可能会返回一个(略有误导性的)状态200，但包含如下内容：

<div id="errors" hx-swap-oob="true">
  There was an error processing your request...
</div>

如果更精确地遵循REST很重要，那么您需要监听htmx:responseError事件，就像@guettli在他之前的回答中提到的那样。