Inline form validation

A signup form where every field is validated on the server the moment you leave it. Nothing is stored, this is only about the interaction.

What to look at

Each input has hx-post="/api/validate/<field>" with hx-trigger="change". When you tab away, htmx posts the form and the server returns a tiny piece of HTML: an error, or "Looks good". It goes into the next .error element.

Errors come back with a 422 status. htmx 2 ignored those. htmx 4 swaps them like any other response, which is exactly what you want for validation.

Submitting posts the whole form. If anything is wrong, the server re-renders the form with all errors filled in and htmx replaces it. If all is well you get a success message. Same SignupForm.astro component, three different uses.

The Show/Hide password toggle is pure Alpine: one boolean, one x-bind:type. The server never hears about it.