How to intercept a form submit in websocket connection?

I have "inherited" a piece of code from a chat application. I would like to add some custom checks on the user input upon submission, allowing the submit to be aborted on client side if necessary. I have created a submit handler javascript function in order to execute the checks and transformations, including preventDefault as first instruction:

async handleSubmit(event) {

    event.preventDefault(); // Prevent default form submission
...

I have linked the handler to the form:

<form
    class="pg-chat-input-bar"
    ws-send
    @submit="handleSubmit($event)"
    enctype="multipart/form-data"
>

Yet, no matter what, the form is submitted immediately when the submit button is pressed. The server receives the form in parallel to / before the handler being executed. I can assess that the handler is triggered and does what it is supposed to do but unfortunately the form has already been submitted. I tried @submit.prevent, @submit.stop and even combined both but it doesn't change the outcome. I found many posts asking to capture/intercept/interrupt a form submit but the solutions are as simple as what I tried. What am I doing wrong?

As I am not starting from scratch I would prefer modify the code as little as possible and use what is already there. Could it be related to the way the WebSocket functions? I am not too familiar with it.

Вернуться на верх