Yes, with

detail.elt

as documented at https://htmx.org/events/#htmx:beforeRequest

Hi, I'm slowly converting a small portfolio site to a spa using HTMX. It has been a great opportunity to use HTMX and Hyperscript. Mostly everything works, but I am stuck with a contact form. I see 3 issues so far (which I'm going to post separately so that it is easier to search and respond): 1. HTMX seems to bypass my custom JS validation. When the data is valid the script does a form.submit(). When HTMX is enabled it immediately does the submit skipping my validation. Can I avoid this and only do the HTMX post after my validation has done its thing?

2. When I submit a contact form it is sent to a controller, which, if everything is good, redirects to a new page. I was hoping to see a smooth page swap, but instead the browser refreshes with the new page. Any suggestions on how to achieve this?

3. When I sent a form, and things seem to be working, I see 2 errors in my console:

htmx:afterRequest

and

htmx:sendAbort

, not sure why.

For 1, we use the HTML5 validation API: https://htmx.org/docs/#validation

If you want to do it in a javascript function instead, i would suggest catching the submit event and then, if validation succeeds, trigger a new event (e.g.

validated

) and use

hx-trigger

to trigger on that new event

Can you post what the submit element looks like? Are you doing a redirect? Generally htmx should smoothly replace whatever the target element is

this makes me suspicious that an accidental navigation is being triggered and aborting the xhr

I think I got #2 to work. The contact form I'm using had an empty action attribute -it routes internally. But when I enter the route in the action it works well.

👍

This is how I have the form tag set:

<form      method = "post" 
            action = "contact-form/send" 
            accept-charset = "UTF-8"
            novalidate 
            hx-boost = "false"
            hx-post = "contact-form/send"
            hx-indicator = ""
            hx-push-url = "true"   
            hx-select = ".site-main" 
            hx-target = ".site-main" 
    > ... </form>

But I'm going to review elsewhere to make sure no other navigation is triggered.

And thank you for all the suggestions

Thank you for shedding light on this. It turned out that since I had my JS submit the form after validation, the form was being submitted twice: once by htmx when the form send button is pressed, and another one, by my own JS validation -which was able to quickly run before pages were swapped.

I'm new to the library, but should

method

and

action

be specified on the

form

? I thought

hx-post

would take care of that

For anyone like me having this problem --needing to implement your own custom js validation, my issues were solved using the hx-trigger attribute on the form to listen for a custom event, and the htmx-trigger() method inside my js, after validation is accomplished, to generate the event.

Yes, normally the action should be indicated. The cms I'm using, CRAFTCMS, has a contact form plugin where this is not needed. Instead the action is placed as a hidden field value, which is picked on the fly and routed to the correct destination. Not sure the why of this non standard way. hx-post does take care of things, but my issue was I had a custom validation so needed to side step hx-post. Great thing about htmx is that, as I'm learning, it provides all the tools to do these things.

And as I mentioned it above, I was able to do this using

hx-trigger

and

htmx-trigger

excellent to hear!

This is weird to say, but the only 'language' where I like having issues is HTMX(!). Answers always come in ways that are quick and disarmingly simple.

Gotcha. I imagine the hidden field is a way of preventing spam bots.

Hey guys, I'm new to learning htmx and was wondering if anyone knows what's the recommended way to go about switching classes between items, e.g. for navbar items that can have an 'active' class highlighting it to show the currently viewed page. And removed and added to a different navbar item when the user navigates to (clicks on) a different one.

I'm about to put a bullet in my head fiddling around with JSON. This example is pretty much straight out of the hyperscript fetch documentation:

<button _='on click fetch https://swapi.dev/api/planets/1/ with method:"GET" as JSON then put it into #planet.innerHTML'>
Get First Star Wars Planet
</button>

This is the error I get:

What I don't understand is if the 'it' contains the payload, how do I access the keys? I've tried every which way to get it: it.name would seem logical, however I get nothing

First, put the gun down. There will be a good solution.

Try accessing the data like a map, not an object. What happens if you try to dump the result to the console, as in

log it

? Can you get at it if you say

result[“name”]

Can anyone tell me why

class-tools

isn't working for me? Am I using it wrong? Perhaps it cannot be used together with `hx-get`/`hx-target`?

html
<div class="navbar-nav me-auto" hx-ext="class-tools">
  <div class="nav-link active"
    hx-get="/overview"
    hx-target="#main-content"
    classes="toggle active"/>
      Overview
  </div>
  <div class="nav-link"
    hx-get="/monitoring"
    hx-target="#main-content"
    classes="toggle active"/>
      Monitoring
  </div>
</div>

Did you have a look at the examples? https://htmx.org/examples/tabs-hateoas/ and https://htmx.org/examples/tabs-hyperscript/ ?

It hadn't occurred to me to implement this as tabs. Thanks, I'll try it out.

Same strategies could be applied to show active nav item, is my thinking 👍

I don't think you need a "GET" there