Renarde HTMX Form validation

[geertvanleemputten]

What is the solution to do form validation with HTMX Forms?

Validation currently works with the flash scope and expects us to do a redirect, but an HTMX form can be a self-loading component on a page somewhere that is closed by default. A redirect does not make sense in this case.

[maxandersen]

@ia3andy @FroMage

[ia3andy]

@geertvanleemputten would you create a small reproducer? I am not sure I get the case.

[geertvanleemputten]

https://github.com/geertvanleemputten/quarkus-htmx-form
(click on the top-right 'user' icon to reveal the form)
It's not an actual usecase, but just to give you an idea.

I write self-loading components (loader, skeleton (preview to avoid layout shifting), view), usually when they are part of the template because they can manage their own state and lifecycle completely.
For example: a user identity component, or a huge category structure for an ecommerce platform.

With HTMX's hx-boost on the body every link becomes an ajax request only swapping the body and title. When you attach an ID to these self-loading components together with "hx-preserve" these components do not get swapped and remain as they were. Therefor drastically reducing the load that you would otherwise send with every page request.

I just want a way to retrieve the original values that were in my form as the validation itself actually works. (without writing too much additional code, because I do like and appreciate the efforts of quarkus to reduce the amount of code being written)

[ia3andy]

Awesome @geertvanleemputten thanks!!

I will have a closer look tomorrow, here a few more general improvements:

• Web Bundler 1.2.0 is out https://github.com/quarkiverse/quarkus-web-bundler/releases/tag/1.2.0
• You can put your static files in /web/static they will be served under localhost:8080/static
• You can use csrf with this hx-headers='{"{inject:csrf.headerName}":"{inject:csrf.token}"}' https://github.com/ia3andy/quarkus-blast/blob/main/src/main/resources/templates/layout/page.html#L10
• You can bundle htmx/hyperscript directly like this (you need the add them in build.gradle also): https://github.com/ia3andy/quarkus-blast/blob/main/src/main/resources/web/app/scripts/main.js#L1

[ia3andy]

Could you login on this topic https://quarkusio.zulipchat.com/#narrow/stream/187038-dev/topic/Quarkus.20Web.2FFrontend, to continue this discussion?