How to prevent multiple form submitting?

Hello!

In order to handle the form I’m using the following code (for test only):


$(document).on("beforeSubmit", "#test-form", function (event, messages) {

        $(this).find(':submit').attr('disabled', true);

        console.log('Test new form');

        return false;

    });

But, despite the fact I make a submit button as inactive, we can see in console, that form is submitting as minimum twice when I quickly click on the button. As a temp fix, wrote the following code:


 $(document).on("beforeValidate", "form", function(event, messages, deferreds) {

        $(this).find(':submit').attr('disabled', true);

        console.log('BEFORE VALIDATE TEST');

    }).on("afterValidate", "form", function(event, messages, errorAttributes) {

        console.log('AFTER VALIDATE TEST');

        if (errorAttributes.length > 0) {

            $(this).find(':submit').attr('disabled', false);

        }

    });

  $(document).on("beforeSubmit", "#test-form", function (event, messages) {

        console.log('Test new form');

        return false;

    });

But not sure that it’s a good decision or not. How to fix this problem?

Thanks in advance!

Probably it’s because of the ajax validation. Usually you don’t need to mind it.