I don’t care what anyone on orange site says. You guys are swell

And women. It’s not a guy/girl thing. HTMX is a hero to all

validate it how? just that it is a date? if so you could do that client side with

<input type="date">

, no?

Well, there could be all kinds of use cases. Maybe it should not be future, and maybe it should fit into a certain interval. But as a general rule, it does not make sense to submit all the form multiple times just to validate some single field.

date ranges should also be pretty easy to validate with the

<input>

tag

min

and

max

attributes. anyway, i agree, that doesn't make sense to make multiple network calls to validate one field at a time, but HTML form validation is pretty powerful

so it makes sense to start from there

also, htmx is by no means saying that you can't have custom-written JavaScript in your app, there are plenty of options out there, popular ones are Alpine.js and HyperScript

or literally even vanilla JS like i'm doing

I have not built much with HTMX but I've been wondering about some questions here's one I found a ( sadly partial) solution to... please read to the end... I wanted a way to validate fields 1 by 1 on change "instantly" with Laravel (or other MVC framework) to show validation errors fast to the user. There is the demo that shows us how to validate a single field at a time... but for this I would need like 15 endpoints for 15 fields form.. which is not very nice. (the demo https://htmx.org/examples/inline-validation/#demo ) I could reload the whole form on each change to show validation errors.. but... this "reloading" of the whole form would remove the caret/any input would lose focus. This is not great because it breaks the user experience. So I thought "What if I can replace multiple elements with a single HTMX request?" and .. turns out I can with OOB swap. Then I put invisible "placeholders" like id="FIELDNAME_errors" in the initial form. So I can swap to update error messages. when the form is submitted and re-rendered with any validation errors it uses the OOB placeholders to fill in any errors. ( Of course I have to keep the placeholders (empty or filled) in the re-rendered form on any field so if the error disappears the OOB swap will clear the error from the form the user sees ) Demo: https://chardiary.com/htmx_form_validation_oob_checks/index.html -- as soon as you change the first input value it POST the form and get to swap all error messages with the newly rendered form. here is the code (to not bother you with "view source" and digging in the DevTools Network tab...) https://gist.github.com/YavorK/eee7ad52b735205f691ec761242260bf The awesomeness is I have to have the HTML for only one form in the normal Laravel/Rails/Django/Whatever-mvc-framework way and only one extra (or maybe no extra) endpoint. The bad part is as soon as you change a field -- all errors will appear --for all unfilled fields that the user has not touched yet...any Ideas?

I believe (haven't tried it, but from looking at the source https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L1084) it has to be either a single event name or a JSON object.

In a Django project I've had similar, and instead of creating 15 different endpoints I created 1 and used a URL parameter to tell me the name of the field, and then in my backend I'd get the form that I'm validating and get the field from the URL and then run the fields validation on it and return just that fields HTML. Unsure if Laravel has similar.

I just looked into the Django docs and it seems it works in a similar fashion. In Laravel I can do what you said you did in Django. Thanks for the idea(s)! I'll try that tomorrow. If I don't come crying back in 24h then I either succeeded (or never tried 😦 ). Do you know of any "cookbook" for more ideas like this for HTMX.. site/tutorials/articles? I'd love to read those... (edit: checked #864934037381971988 and there are some some links, i'll check those)

There’s a django htmx patterns repo that was quite good as I remember it https://github.com/spookylukey/django-htmx-patterns

Maybe take a look at https://github.com/spookylukey/django-htmx-patterns/blob/master/form_validation.rst ?

hx-get on an element also sends the whole form 🤦‍♀️

like i said, you don't need to stick with purely

hx-

attributes, there are tons of things you can do to validate only a single input at a time. the first question i would always ask, what is the specific validation requirement for each of the inputs? and why is that requirement necessary?

question about this blog post discussing different methods for updating other content: https://htmx.org/examples/update-other-content/#events. I like approaches #3 and #4 because they explicitly declare the dependencies in the html. #3 would be even nicer, imo, if I didn't have to update the backend to trigger the event with an http header. If instead I could just do someting like:

<form hx-post="/contacts" on-success-trigger="newContact">

. And it would trigger the event on any 2xx response. Is there anything like this built in?

I’ve been doing similar to @bitter-monkey-50309 but my endpoint works out what it’s validating by looking at the field names(s) in the request received by the endpoint.

I'd like to be able to declare success (and error) variations for HTMX to use as well.

@adamant-state-54102 I have an HTMX extension and some Django middleware I can upload to Github which does what you're wanting to do - if you happen to use Django, and are happy with bugs (I'm a paid IxD designer, not programmer 😂 ). The gist though is use an extension to add extra HTMX headers to the request, work out if a request is a success or not on the backend, and then add HX-Retrigger etc on the response to have HTMX do what you want. It seems to work well 🤷‍♂️

where is the get? If it isn't on a form, it shouldn't include the whole form: https://github.com/bigskysoftware/htmx/blob/1d146b103ddcf9b8f71db1714d4e0ee786f6c7cb/src/htmx.js#L2346

if it did, gets for links would include the surrounding form as well, which would be pretty horrible

I tried this today and it works great with laravel too. Thanks! Another great part is that HTMX automatically sends the whole form when the field is changed so I can validate the whole form and return errors for that field but with context in mind.. for example when "repeat password" field changes it takes into account what has been entered in the "password" field without extra effort on my side ❤️

I have a list page with a form to filter it. I set hx-select to the list element and hx-replace-url="true" and it works. Problem is I have some js that updates the url hash (y'know, after the #) and whenever I submit the form, it removes the hash. How can I preserve the hash on form submit?

https://lobste.rs/s/dc5wjv/htmx_is_future red site discussion (so much better than orange site)

mmm, might need to write a script to do that

replacing the URL is treated like going to another page

i can get my head around this discussion, although the "`GET` and

POST

should be good enough for anyone" guy made me laugh

maybe they were dreading learning when to use which method, and the html restriction was giving them an excuse?