Handling request errors

[alexei]

I have a view that handles boosted form submissions. If it receives a htmx-boosted request, it responds with headers set to {"HX-Push-URL": "false", "HX-Retarget": "this", "HX-Reswap": "outerHTML show:unset"}. That works great and the returned partial correctly replaces the form as long as the response status is 200 OK. But if it's 400 Bad Request, then nothing happens. What do?

[anntnzrb]

Use the htmx:beforeSwap event: htmx.on("htmx:beforeSwap", (e) => { if (e.detail.xhr.status === 400) { e.detail.shouldSwap = true; e.detail.isError = false; } }). This enables swapping on 400 responses. Alternatively, use the response-targets extension: <form hx-ext="response-targets" hx-target-400="#error-div">.

[yawaramin]

My advice: https://dev.to/yawaramin/handling-form-errors-in-htmx-3ncg

[alexei]

Thanks for the responses. I was afraid I needed to do some configuration -- I found similar pointers on the Internet before I asked the question. Because of that I have since moved on.

As a side note -- a browser normally renders the server response regardless of the status code. If htmx is meant for progressive enhancement, then why does it, by default, do something other than what the browser does?

[yawaramin]

A historical decision was made to only swap for HTTP 2xx responses. At the time everyone thought this was the more correct behaviour. Maybe because error messages could potentially be anything and break the look and feel of the page. Luckily, it was left configurable.