Question

It is jQuery.

I have a signup form. At the domain textbox field, people fill in domain, then onblur Ajax call to registar API for validation on domain availability.

The validation may take up to 15 seconds depending on network speed.

In this waiting period, if user go to click submit button, how to block?

My idea is simple: Before any Ajax call finish loading, I don’t want to allow people to click submit.

I can think of a way, but I am not sure whether this is a good way. I need advice.

beforeSend: function(){
    $("#btnSubmit").attr("disabled", "disabled");
},

complete: function(){
    $("#btnSubmit").attr("disabled", "");
}

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" />

Answer 1

Setting async to false might work but that might hang the browser completely for 15 seconds. Your best bet is to disable the submit element and prevent the submit in other ways using a variable where you store whether the validation is in process:

var validating = false;

$(function() {

    $('form').submit(function() {
        if(validating) return false;
        var button = $(this).find('input:submit, input:button');

        button.attr('disabled', 'disabled');
        validating = true;

        $.ajax({
            url: 'validator.php',
            data: $(this).serialize(),
            success: function() {
                validating = false;
                button.removeAttr('disabled');
            }
        });
    });
});

This way the user cannot submit the form in any other means. If you only disable the submit button, it might be possible to submit the form with the enter key (not sure about this). Using a variable which tells whether the validation is running is a sure way to prevent accidental submitting.