Hacker News new | ask | show | jobs
by nymanjon 306 days ago
Yes, going from SPA-like libs to hyper text libs is definitely a change in how you use your mind and approach problems. It's like going from OO to Functional-style programming. It really messes with the brain. But eventually you learn to love both paradigms and see the good and both and then you start using both patterns in your code, which really messes with other devs as they see both patterns being used.

I've been programming on personal projects with html-form (my own lib that is a radically paired down version of HTMX with a focus on using native form controls, which makes it so you don't need hydration like you do in HTMX).

So, some thoughts on your problem.

One note. Many people mention OOB. But there is also hx-select, which can be quite handy.

I think there are multiple different approaches that are possible, that I can think of, depending on your needs.

Use eventing. On the server create an event that will be called on the front end by HTMX. When this is called have some vanilla JS that updates the class on your location in the form.

Send all the forms down and have them only visible based on CSS or using an input element is checked or not or using JS. That would be pretty straight forward.

If the form passes then replace all the body contents or main element. If it doesn't just update the form and add any user information. Or send an event back which causes a popup to tell the user what their issue is. Or send an even that causes some text to show.

Also, you can also use CSS and native HTML form validation that will show text underneath an input (or above the input) that tells the user what the the input requires. Modern CSS has a pseudo selector which only turns on when the input is invalid[1].

This is simple enough that a straight up MPA could be used with page animations between pages using view transitions[2].

Similar to one of the solutions above, but using data-action style of programming.[3]

But, I usually try to not over complicate things.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:user-inval...

[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_view_tr...

[3]: https://www.lorenstew.art/blog/frontend-event-system

1 comments

Another solution besides data-action pattern is html-traits or web components.