HTMX 默认忽略非 2xx HTTP 状态码的响应，需通过官方扩展 response-targets 启用错误状态下的目标元素交换，并配合 hx-target-4xx/hx-target-5xx 属性指定错误内容插入位置。
htmx 默认忽略非 2xx http 状态码的响应，需通过官方扩展 `response-targets` 启用错误状态下的目标元素交换，并配合 `hx-target-4xx`/`hx-target-5xx` 属性指定错误内容插入位置。
HTMX 的设计哲学是“渐进增强”，其默认行为仅对成功响应（HTTP 2xx）执行 DOM 交换，而将 4xx（客户端错误）和 5xx（服务器错误）视为“失败请求”，直接丢弃响应体、不触发任何 swap 操作——这正是你遇到问题的根本原因：尽管服务端返回了合法 HTML 和 400 Bad Request，HTMX 却静默忽略，导致错误提示无法渲染。
要启用错误响应的 DOM 交换能力，必须引入 HTMX 官方扩展 response-targets：
<!-- 必须在 htmx.js 之后加载 --> <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js"></script> <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/response-targets.js"></script>
⚠️ 注意：该扩展需与 HTMX 主库严格版本匹配（示例中为 1.9.12），建议锁定版本号避免意外兼容问题。
启用扩展后，还需在包含 HTMX 行为的外层容器上声明 hx-ext="response-targets"，否则扩展不会生效：
<div hx-ext="response-targets">
<form
hx-boost="true"
hx-target="#response"
hx-target-4xx="#errorResponse"
hx-target-5xx="#errorResponse"
hx-swap="afterbegin"
>
<label for="title">Title of your post</label>
<input type="text" id="title" name="title">
<button type="submit">Send post</button>
</form>
<div id="response">
<!-- 正常响应（2xx）将插入此处 -->
</div>
<div id="errorResponse">
<!-- 4xx/5xx 响应将插入此处 -->
</div>
</div>关键要点说明：
- hx-target-4xx 和 hx-target-5xx 支持任意 CSS 选择器（如 #errorResponse、.alert、[data-error]），可复用现有结构；
- 若未设置 hx-target-4xx，则 4xx 响应将被完全忽略（即使扩展已加载）；
- hx-swap 对错误响应同样生效，例如 hx-swap="innerHTML" 可完全替换错误容器内容；
- 错误响应的 Content-Type 仍需为 text/html（你已正确配置，排除此干扰项）；
- 扩展不会改变默认行为：2xx 响应仍走 hx-target，4xx/5xx 则优先匹配对应 hx-target-*xx。
✅ 最佳实践建议：
- 在全局 或
上添加 hx-ext="response-targets"，避免重复声明； - 为错误区域添加语义化 class（如 class="error-banner hidden"），并在 HTMX 事件中控制显隐：
<div id="errorResponse" class="error-banner hidden" hx-on::after-settle="this.classList.toggle('hidden', !this.innerHTML.trim())"> </div> - 结合 hx-trigger="every 3s" 或 hx-retry="3" 实现自动重试逻辑，提升健壮性。
通过以上配置，你的空标题验证场景即可完美工作：服务端返回
Title cannot be empty
并设 Status: 400，HTMX 将自动将其插入 #errorResponse，无需手动 JS 或页面刷新。 
