What would be the appropriate way to handle form errors when using HTMX?

[josevelaz]

I see that some components have a HasError props, but how would that get enabled through htmx?

[axzilla]

Hey,

you could just put something like this into the response:

templ InputForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.Label(form.LabelProps{
				For: "email-form",
			}) {
				Email
			}
			@input.Input(input.Props{
				ID:          "email-form",
				Type:        input.TypeEmail,
				Placeholder: "[email protected]",
				HasError:    true,
			})
			@form.Description() {
				Enter your email address for notifications.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please enter a valid email address
			}
		}
	</div>
}

Let me know if you have further questions.

[manicar2093]

Hi @josevelaz.

I don't know if my answer is what you expect but I found a video on YT about form validation with templ and HTMX

https://youtu.be/bQirFmhS3iw

After watching it I wonder, what would be the best validation package for this task to not do it as in the video?

There are some option:

• go-playground/validator
• gookit/validate
• ozzo/validation
• And many many more

I think you can use any of validator options and adapt it using video strategy. I'm not an expert of HTMX (nor HTML/JS/CSS/Life hahaha) but there should be a way to send "validation request" when form changes.

A real problem I see from here is how to handle time values. HTML input datetime can receive a formatted time (2025-0517T13:20:30Z-07:00 I think this can be an example). And create a form with correct format between them seems to be hard.

Other scenario that I have not checked is files handling too.

Maybe consider create JS functionality for this two points would be a good conclusion form this discussion 😅