htmx - 使用 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

我创建了这个解决方案，以便您可以hx-target-error =用来定义在请求失败后将显示哪些 HTML

document.body.addEventListener('htmx:afterRequest', function (evt) {
  const targetError = evt.target.attributes.getNamedItem('hx-target-error')
  if (evt.detail.failed && targetError) {
    document.getElementById(targetError.value).style.display = "inline";
  }
});
document.body.addEventListener('htmx:beforeRequest', function (evt) {
  const targetError = evt.target.attributes.getNamedItem('hx-target-error')
  if (targetError) {
    document.getElementById(targetError.value).style.display = "none";
  }
});

Answer 2

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

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

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