bigskysoftware / bigskysoftware/htmx
Kebab-case version of `htmx:validation:validate` does not trigger callback
- Dominant language
- JavaScript
- Stars
- 49.4k
- Forks
- 1.7k
- Avg merge
- 3d 22h
- Merged PRs (30d)
- 30
Description
I am trying to implement custom validation using `htmx:validation:validate` in a template language, where I cannot use colons (`:`) in attribute names.
Using kebab-case replacing all the colons with dashes as [documented for hx-on](https://htmx.org/attributes/hx-on/) does not seem to work.
While other events with `hx-on` work perfectly, `htmx:validation:validate` does not:
- hx-on--after-on-load ✅
- hx-on--config-request ✅
- hx-on--validation-validate ❌
Surprisingly also the deprecated form of `hx-on="htmx:validation:validate: callback()"` does not seem to work either!
To be clear: the `htmx:validation:validate` _event_ is fired, I can see it using `hx-ext="debug"`, only my callback is never called.
Only with the dash in the event name my callback gets triggered: `hx-on--validation:validate="callback()"`
Is there another way to avoid the colon in the attribute name?
Aside, I suspect, but have not tested, the same issue exists for the `htmx:xhr:*` events.
**edit**: slightly related documentation issue: #2201
Contributor guide
Research direction
Start at the hx-on handling for event names and compare how htmx:validation:validate is dispatched with the working after-on-load and config-request events. Reproduce the examples from the issue, including the deprecated hx-on form and hx-ext="debug"; done means the kebab-case and deprecated forms invoke the callback for the validation event.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100