Prevent double clicking when using jQuery Validate submitHandler

Question

I am using the submitHandler from Jquery Validate to trigger my onClick event. I tried using $("#btnPay").disabled = true; to disable the button. However, it was not working.

Below is my code i have tried so far.

    $("#myForm").validate({
        rules: {
            cardholdername: {
                required: true,
            },
            cardholderemail: {
                required: true,
            },
        },
        messages: {
            cardholdername: {
                required: "Please enter your name",
            },
            cardholderemail: {
                required: "Please enter your email",
            },
        },
        onkeyup: false, //turn off auto validate whilst typing
        submitHandler: function (form) {

            $("#btnPay").disabled = true;

            event.preventDefault();

            var form = document.querySelector('form');
            var extraDetails = {
                name: $('#cardholder-name').val(),
                email: $('#cardholder-email').val(),
            };
            stripe.createToken(card, extraDetails).then(setOutcome);

        }
    });

Possible duplicate of [Jquery Validate Plugin Prevent Double Submit On Validation](https://stackoverflow.com/questions/5996950/jquery-validate-plugin-prevent-double-submit-on-validation) — Alive to die - Anant, Aug 08 '17 at 07:55

score 0 · Answer 1 · answered Aug 08 '17 at 08:10

submitHandler fires only after the form was successfully validated. You should add a separate event listener for click, something along the lines of

// Prevent multiple form submission
$('#btnPay').on('click', function(e) {
  $(this).prop( "disabled", true );
});

//the rest of your code

Keep in mind that you'll have to handle enabling the button back on success/error - submitHandler and invalidHandler are perfect candidates for that.

score 0 · Answer 2 · edited Jul 11 '22 at 12:37

0

$("#btnLogin").attr('disabled', 'disabled');

The above code solved my issues.

edited Jul 11 '22 at 12:37

TarangP

2,711
5
20
41

answered Aug 08 '17 at 08:11

Anonymous.js

21
4

Prevent double clicking when using jQuery Validate submitHandler

2 Answers2