bigskysoftware / bigskysoftware/htmx

I don't find any way to stop request from htmx:beforeRequest listener

Open
#2,681 2 comments 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

Hi,

I'm using htmx 1.9.12 in a Symfony 6.4 project with assetMapper.

I've made lot of try but not found any way to stop the request when a included form is not valid.

Event is correctly catched by my event Listener, everything seems working well except the htmx request is not aborted.
If I check evt.detail.xhr.readyState when receiving the event, his value is 1 (opened).

```html

Continuer

```

```js
import htmx from 'htmx.org';

window.htmx = htmx;

// validate included forms
document.body.addEventListener('htmx:beforeRequest', function(evt){

let hxInclude = evt.target.getAttribute('hx-include');
if (!hxInclude){
return
}

let isValid = true;
hxInclude.split(',').forEach(selector => {
let elements = document.querySelectorAll(selector.trim());
elements.forEach(elem => {
if (elem.tagName === 'FORM') {
isValid = isValid && elem.reportValidity();
}
});
});

if(!isValid){

// I don't find any way to stop request... :(
// this 3 lines below don't stop the request.
evt.detail.xhr.abort(); // abort request
evt.target.dispatchEvent(new CustomEvent('htmx:abort'));
evt.preventDefault();

// scroll to first one
const invalidInputs = Array.from(document.querySelectorAll(':invalid, .is-invalid, .form-error'))
invalidInputs.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)
invalidInputs[0].scrollIntoView({ behavior: 'smooth' })
}

})

```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the behavior with htmx 1.9.12 using the shown button, included forms, and htmx:beforeRequest listener. Inspect the beforeRequest event and request-cancellation behavior; done when an invalid included form reliably prevents the request while valid forms still submit.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.