How to remove the click event on an Ajaxified form's submit buttons?

Question

I've created several forms with Drupal 8 directly in admin or with Form API. I've added some client side validation with this jQuery plugin : jQuery Validation Plugin.

Everything works very well. Now my client asked me to open one of these form in a popin. So I've installed this 2 modules : Contact Block (The Contact Block module provides contact forms in a block.) https://www.drupal.org/project/contact_block

I can open form in a popin and it works well but after validation, the page is reloaded and it is not UX friendly since we are in a popin. So I've installed this module : Contact ajax (implements ajax submission for core Contact form in Drupal 8.) https://www.drupal.org/project/contact_ajax

It works well but the submission is done before I can execute client side validation.

The problem seems to be the priority of execution.

I've tried to apply preventDefault on the submit button but it doesn't work.

$( "#form #submit-button" ).click(function( event ) {
  event.preventDefault();
  //validation code
});

I've found this topic but I donc know how to implement the code : How to prevent an Ajax form from submitting

I've also found this topic : https://www.drupal.org/project/clientside_validation

Can you help me to understand how I can block the click event on an Ajaxified form's submit buttons ?

EDIT

I've tried this module : Clientside Validation and apply this patch 2952233-5.patch

It works, the Ajax submit button is disabled. The solution is based on that answer.

For now it has a bug : the form is validated but I don't see the confirmation message at the end.

Then, I've copied the code from this patch in my project and it works.

Answer 1

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    $( "#form #submit-button" ).click(function( event ) {
      event.preventDefault();
    });
  }
};

Can you try like this. This will trigger for every AJAX call.