0

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.

0
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.

  • Could you expand on your solution ? How do you implement this code ? I know php and JS but never used Drupal.behaviors – Sébastien Gicquel Mar 26 at 12:27
  • This code is similar to $(document).ready().If we write anything inside Drupal. behaviors, it will trigger for every ajax click.drupal.org/docs/8/api/javascript-api/javascript-api-overview read this documentation – Rajeev C P Mar 26 at 12:33
  • I've added this code in the js custom file but the submit button is still Ajaxified. Also, I've edited my question. – Sébastien Gicquel Mar 26 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.