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

如果您的代码引发错误（验证？），您可以更改目标并与响应标头交换行为。

Response.Headers.Add("HX-Retarget", "#errors"); 
Response.Headers.Add("HX-Reswap", "innerHTML");

如果你想返回 200 以外的状态，你必须告诉 htmx 接受它。4xx 通常不会在 htmx 中进行交换。如果出现验证错误，您可以使用 422。

document.body.addEventListener('htmx:beforeOnLoad', function (evt) {
    if (evt.detail.xhr.status === 422) {
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
    }
});

它适用于 htmx 1.8。

如果您想删除下一个成功请求时的错误消息，您可以使用 hx-swap-oob。带外元素必须位于响应的顶层。所以响应可能如下所示：

<div>
    your new row data...
</div>
<div id="errors" hx-swap-oob="true"></div>

更新
您现在可以使用新的强大扩展multi-swap来交换任意放置和嵌套在 DOM 树中的多个元素。
请参阅https://htmx.org/extensions/multi-swap/

更新
看看新扩展The response-targets Extension。
此扩展允许您指定在收到不同 HTTP 响应代码时要交换的不同目标元素。

Answer 2

请参阅https://htmx.org/extensions/response-targets/

（在新版本发布之前，可能需要从GitHub 存储库htmx.js下载。）response-targets.js

<script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>

<div hx-ext="response-targets">
    <div id="response-div"></div>
    <button hx-post="/register"
            hx-target="#response-div"
            hx-target-5*="#serious-errors"
            hx-target-404="#not-found">
        Register!
    </button>
    <div id="serious-errors"></div>
    <div id="not-found"></div>
</div>

Answer 3

我创建了这个解决方案，以便您可以用来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 4

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

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

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