https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • b

    bitter-machine-55943

    05/06/2023, 3:30 PM
    I don’t care what anyone on orange site says. You guys are swell
  • b

    bitter-machine-55943

    05/06/2023, 3:31 PM
    And women. It’s not a guy/girl thing. HTMX is a hero to all
  • g

    great-cartoon-12331

    05/06/2023, 3:48 PM
    validate it how? just that it is a date? if so you could do that client side with
    <input type="date">
    , no?
  • f

    flaky-energy-47039

    05/06/2023, 3:51 PM
    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.
  • g

    great-cartoon-12331

    05/06/2023, 3:53 PM
    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
  • g

    great-cartoon-12331

    05/06/2023, 3:53 PM
    so it makes sense to start from there
  • g

    great-cartoon-12331

    05/06/2023, 3:56 PM
    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
  • g

    great-cartoon-12331

    05/06/2023, 3:59 PM
    or literally even vanilla JS like i'm doing
  • s

    shy-zebra-22292

    05/06/2023, 4:45 PM
    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?
  • b

    bitter-monkey-50309

    05/06/2023, 4:57 PM
    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.
  • b

    bitter-monkey-50309

    05/06/2023, 5:01 PM
    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.
  • s

    shy-zebra-22292

    05/06/2023, 5:25 PM
    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)
  • a

    adventurous-ocean-93733

    05/06/2023, 5:51 PM
    There’s a django htmx patterns repo that was quite good as I remember it https://github.com/spookylukey/django-htmx-patterns
  • p

    proud-librarian-99598

    05/06/2023, 7:45 PM
    Maybe take a look at https://github.com/spookylukey/django-htmx-patterns/blob/master/form_validation.rst ?
  • f

    flaky-energy-47039

    05/06/2023, 8:14 PM
    hx-get on an element also sends the whole form 🤦‍♀️
  • g

    great-cartoon-12331

    05/06/2023, 8:17 PM
    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?
  • a

    adamant-state-54102

    05/06/2023, 9:40 PM
    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?
  • m

    mammoth-family-48524

    05/06/2023, 10:33 PM
    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.
  • m

    mammoth-family-48524

    05/06/2023, 11:14 PM
    I'd like to be able to declare success (and error) variations for HTMX to use as well.
  • m

    mammoth-family-48524

    05/06/2023, 11:15 PM
    @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 🤷‍♂️
  • m

    mammoth-family-48524

    05/06/2023, 11:16 PM
    Copy code
    html
    <form
        hx-patch="{% url 'team' team.id %}"
        hx-success-refresh="true"
        hx-error-target="#donation-amount-dialog"
        hx-error-swap="innerHTML"
        hx-error-block="base/home.html:team_budget_amount_form">
  • m

    mysterious-toddler-20573

    05/07/2023, 3:01 AM
    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
  • m

    mysterious-toddler-20573

    05/07/2023, 3:02 AM
    if it did, gets for links would include the surrounding form as well, which would be pretty horrible
  • s

    shy-zebra-22292

    05/07/2023, 12:08 PM
    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 ❤️
  • h

    high-microphone-71328

    05/07/2023, 8:20 PM
    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?
  • g

    gorgeous-airport-54386

    05/07/2023, 8:54 PM
    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
    m

    mysterious-toddler-20573

    05/07/2023, 9:01 PM
    mmm, might need to write a script to do that
    h
    • 2
    • 4
  • m

    mysterious-toddler-20573

    05/07/2023, 9:01 PM
    replacing the URL is treated like going to another page
  • m

    mysterious-toddler-20573

    05/07/2023, 9:02 PM
    i can get my head around this discussion, although the "`GET` and
    POST
    should be good enough for anyone" guy made me laugh
  • g

    gorgeous-airport-54386

    05/07/2023, 9:03 PM
    maybe they were dreading learning when to use which method, and the html restriction was giving them an excuse?
1...111511161117...1146Latest