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.
