Nevermind... they where not showing up because I changed something in the file and don't know how the test suite works

Is there anywhere a document describing the automated tests setup in more detail appart from the readme?

Draft of Issue 10 of This Week in HTMX: https://828e010d.this-week-in-htmx.pages.dev/issue/10/ Feedback welcome. What should the title be? @User @User This issue features messages from you. Please feel free to reach out if you'd like them left out/amended/any other issue. My DMs are open.

LGTM

> htmx now sponsored by Craft CMS Craft CMS is now a corporate sponsor of htmx ❤️ https://craftcms.com/

"The Missing Link"?

The issue I'm having now is, that

hx-post

submits the form even if it's invalid - so I guess instead of

event.preventDefault()

I need to prevent htmx from submitting - maybe I just try to find a way to disable the "send" button as long as the form is invalid?!

js
if (!form.checkValidity()) {
  // something that prevents htmx from posting?!
  event.preventDefault()
  event.stopPropagation()
}

I'd like to see the usage of

htmx:validation:validate

in plain JS - hyperscript breaks my brain right now 😄

it won't submit the form if it's invalid

Cracking issue Deniz 💪 I read that and I see an active, engaged and supportive community making cool stuff and having fun 🥳 Thanks also in particular to you sir, for taking the lead on https://missing.style, along with all the other stuff you’re working on in this space 👏👏

so that makes me think there might be something wrong with the hx attribute?

can you post the form html?

here's a form from one of mine:

that will not submit if the user doesn't put a good email address in

no JS required - it's because the type="email" sets the validation

So I made a pass at a precommit - I purposefully had it do nothing

I've had a lot of luck on personal projects with pre-commit

There's a free CI as well: https://pre-commit.ci/ I've set it up on my fork and made a sample Pr to see an example

if/once everyone agrees to this tooling we can start talking about any formatting we want - honestly the only one I care about is no empty lines/trailing spaces in markdown because every time I edit the docs I need to undo like 30 auto changes

Sorry for bringing this up, but I am really in need of a good piece of advice here. I do understand that my post is rather a request for a manual then a simple question)) But I do need this advice real bad)) And I wish it was available on htmx site as a tutorial or a chapter in the docs. I could try to write this doc if I knew all the answers))

I think I can help. From your first post it's not really clear the exact problem you are trying to solve. The basic htmx attributes like hx-get, hx-post, etc. shouldn't trigger a whole page reload. Is that the issue you're having?

I'm not familiar with unpoly at all so I can't really extract any information from the comparisons you made in your earlier post. To answer the first question, as far as I know, the only way to control when js runs is through events. htmx has various events that you can respond to: https://htmx.org/reference/#events. You can listen for one of these events and then trigger some js when that event happens.

You are correct. HTMX behaves as expected. In my example, that I took of the bootstrap page it uses

<form novalidate>

and that's why it uses extra JS to prevent the form from submitting. > For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your . This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls. > I'll dig depper - you helped me a lot! Thanks!

I think I got it, thanks to a post by @User [1] In order to use the boostrap form validation example[2], I had to add hx-trigger to the form with a custom event

bs-send

and then execute the trigger

htmx.trigger(form, "bsSend");

on

form.checkValidity()

in my JS. here is a fiddle https://jsfiddle.net/1Lrtg34e/4/ (I hope I did it right, with the inclusion of demo.htmx.org please feel free to add a correction or how to do it better). [1] https://discord.com/channels/725789699527933952/725789747212976259/925877952523161720 [2] https://getbootstrap.com/docs/5.1/forms/validation/#custom-styles

Do you think I should ask my Form Validation Question on Stack Overflow and answer it myself, to move the solution out of this walled garden and into the open internet?

A bit naively I thought I could wrap that Bootstrap Validation Example into an extension, but it just not doing anything 😄 https://jsfiddle.net/1tnrdfu6/2/ any help is welcome! Thank you!

I am trying to make a site/app that acts kind of like a SPA: after the initial load only part of the page (content area) changes on navigation. Like Turbolinks (https://github.com/turbolinks/turbolinks), like Unpoly like... hx-boost)) Basic functionality works as expected. Buе there are topics/problems, described the ordered list of my original post, I do not know how to deal with. Unpoly has docs how to deal with them. As I already use htmx, I want to know how to deal with them with this library, but can't find anything on the topic. There might be something buried in discord history, but I can't find nothing. I wish we could have those answers in the docs. But for now I just need answers)))

I think the problem you describe is "idempotent transformations"[1] means your 3rd party library, like Leaflet loads on the intial page visit and once you navigate away and then come back, the library doesn't load again, or it's initialized twice and so on. It took me a long time to understand what's happening. Unpoly guides you through it with their concept of compilers, where you init your lib and destroy the instance once you navigate away. Turbolinks leaves you alone to deal with it and I believe htmx has no concept of it either. I'm not 100% sure, but if you write inline JS that gets loaded as a fragment with HTMX you can get around a few things because it get re-evaluated. But a safer bet is to mount and unmount components as unpoly does. For that you can get a lot of insight from this post: https://stackoverflow.com/a/44057187/814031 I tried to adapt this for HTMX, but it's buggy and I might not use the correct htmx event for when to unmount the component. https://gist.github.com/79809fcd7a150094666649cb33e968c8 But it would be great if someone with more knowledge can chime in and maybe we will get a working solution out of it. [1] https://github.com/turbolinks/turbolinks#making-transformations-idempotent

off topic: is it possible yet to develop with git repos within other git repos effectively yet?