bigskysoftware / bigskysoftware/htmx

Kebab-case version of `htmx:validation:validate` does not trigger callback

Open
#2,614 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.