<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在提交时只追加一行。
如何与html，我可以处理错误，并在#errors显示消息?
我创建了这个解决方案，以便您可以使用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";
}
});
如果您的代码引发错误(验证?)，您可以更改目标并与响应头交换行为。
Response.Headers.Add("HX-Retarget", "#errors");
Response.Headers.Add("HX-Reswap", "innerHTML");
如果你想返回一个不是200的状态，你必须告诉html接受它。4xx通常不会在html中进行交换。如果出现验证错误，可以使用422。
document.body.addEventListener('htmx:beforeOnLoad', function (evt) {
if (evt.detail.xhr.status === 422) {
evt.detail.shouldSwap = true;
evt.detail.isError = false;
}
});
可以在html1.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/
参见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>
虽然它不遵循REST原则，但您可以考虑使用swap-oob将错误报告给用户。例如，您的请求可能返回一个状态200(稍有误导)，但包含如下内容:
<div id="errors" hx-swap-oob="true">
There was an error processing your request...
</div>
如果更精确地遵循REST很重要，那么您将需要监听html:responseError事件，正如@guettli在他之前的回答中提到的。
这并不比你想象的复杂，只需要使用html事件和一点js。
为表单添加html:responseError事件监听器，并将错误细节传递给#error
document.getElementById('form').addEventListener('htmx:responseError', function(evt) {
document.getElementById('error').innerHTML = evt.detail.error
});