bigskysoftware / bigskysoftware/htmx
I don't find any way to stop request from htmx:beforeRequest listener
- 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
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