HTMX - Allow HTTP error 400 and 422 swap content to enable showing validation errors

htmx-allow-400-errors-swap-for-validation-errors.md

Still a newbie to HTMX.

I was writing some form submit interaction and realized that HTMX won't swap/render if the HTTP status code is not 2xx.

For 404, 500 or 503 errors, I think it's fair enough.

For my use case, I'm returning error 400 or 422 for validation errors. I'm returning the form back with some error decorations for example.

According to the docs, I can change that behavior.

So I did.

document.body.addEventListener('htmx:beforeSwap', function(evt) {
  // Allow 422 and 400 responses to swap
  // We treat these as form validation errors
  if (evt.detail.xhr.status === 422 || evt.detail.xhr.status === 400) {
    evt.detail.shouldSwap = true;
    evt.detail.isError = false;
  }
});

you can use htmx.on to write less code ；）

https://wfq.gumroad.com/l/htmx

htmx.on("htmx:beforeSwap", (e) => {
    // Allow 422 and 400 responses to swap
    // We treat these as form validation errors
    if (e.detail.xhr.status === 422 || e.detail.xhr.status === 400) {
        e.detail.shouldSwap = true;
        e.detail.isError = false;
    }
})