Elementor Form : client side javascript validation

I already did server side data validation using the hook elementor_pro/forms/validation and it’s working fine.

In addition I would like to do client side data validation before submitting the form to fix invalid data straight away avoiding a round trip to the server.

I would like to do custom validation using Javascript and not using the default browser tooltip bubble.

I added this code and the validation works fine, errors messages are displayed on the form. However the form is still submitted when fields input are invalid.

document.addEventListener('submit', (e) => {
  // this is my custom validation function
  validateForm(e);
})

How to prevent the form being submit? preventDefault() function doesn’t work as the form submit is done via AJAX.

I would like to know what’s the correct way to stop the form submitting when the client side validation failed.