You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
importhtmxfrom'htmx.org';window.htmx=htmx;// validate included formsdocument.body.addEventListener('htmx:beforeRequest',function(evt){lethxInclude=evt.target.getAttribute('hx-include');if(!hxInclude){return}letisValid=true;hxInclude.split(',').forEach(selector=>{letelements=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 requestevt.target.dispatchEvent(newCustomEvent('htmx:abort'));evt.preventDefault();// scroll to first oneconstinvalidInputs=Array.from(document.querySelectorAll(':invalid, .is-invalid, .form-error'))invalidInputs.sort((a,b)=>a.getBoundingClientRect().top-b.getBoundingClientRect().top)invalidInputs[0].scrollIntoView({behavior: 'smooth'})}})
The text was updated successfully, but these errors were encountered:
Hey, it's likely to be an error with your scripting logic, as calling event.preventDefault should work just fine, see this JSFiddle for instance. If the checkbox is unticked, I call preventDefault in a body's htmx:beforeRequest listener callback just like you did above, and the request is correctly prevented from happening.
If you add logs to your script, could it be possible that isValid is simply not false when you expect it to be so? Thus your request abortion logic wouldn't be called at all
I've already checked that isValid is correct. (By placing a console.log in the if)
I've also checked this way that the event is only called once.
Maybe it comes from another script. On this project I'm using Alpinejs too and the alpine-morph extension but I never heard that any of these can cause any trouble with HTMX.
I will double check the network log to see if I missing something.
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).
The text was updated successfully, but these errors were encountered: