The below code blocks any non-ajax form from submitting.
$(this.form) .on('submit', function(event) { if (/* Some condition */) { event.preventDefault(); } }); In Drupal 8, how can we block an Ajax form from being submitted?
Ajax forms do not trigger a form submit handler and I have not been able to block the click event on an Ajaxified form's submit buttons.
For reference, I am trying to fix Issue #3010084: Form submission finishes before file upload is complete
I found the solution here.
// Add submit handler to form.beforeSend. // Update Drupal.Ajax.prototype.beforeSend only once. if (typeof Drupal.Ajax !== 'undefined' && typeof Drupal.Ajax.prototype.beforeSubmitOriginal === 'undefined') { Drupal.Ajax.prototype.beforeSubmitOriginal = Drupal.Ajax.prototype.beforeSubmit; Drupal.Ajax.prototype.beforeSubmit = function (form_values, element_settings, options) { if (/* Custom condition */) { this.ajaxing = false; return false; } return this.beforeSubmitOriginal(); }; } Preventing a form submit while the form ajax handler is ongoing
$(document).ajaxComplete(function(){ $('#edit-next').removeAttr("disabled"); }); /** * prevent submit in case of ongoing ajax update */ $(document).ajaxStart(function(event){ event.preventDefault(); $("#edit-next").attr("disabled", "disabled"); } ); 