how do I disable the submit button when the form gets submitted without any errors

Question

I want to disable the submit button when a user submits the form so that he may not click the submit button twice.

So I coded the following javascript in my page

$(document).ready(function(){
    $("form").submit(function(){
       $("form").find('input[type=submit]').attr('disabled', 'disabled');
    });
})

This works great. But when I applied the jquery validate library and appended the following code

$(document).ready(function(){
    $("form").submit(function(){
       $("form").find('input[type=submit]').attr('disabled', 'disabled');
    });

    $("form").validate({
            errorClass: "jqueryError",
            errorElement: 'label',
            success: 'jqueryValid',
            messages: {
                TopicCategory: {
                    required: 'Please choose a category for topic.'
                },
                TopicSubcategoryId: {
                    required: 'Please choose a subcategory for topic.'
                },
                TopicTitle: {
                    required: 'Please enter a title for topic.'
                }
            }
        });
})

The submit button got disabled after submitting form even if there are incomplete inputs in the website (i.e. form with errors and user is asked to fill them properly).
and when the user completes the form correcting all errors the submit button is disabled.

How do I first check if there are no errors in the form and then disable the submit button and then submit it finally.

Thanks

Answer 1

Add the following parameter to jQuery Validate:

submitHandler: function(form) {
    $(':submit', form).attr('disabled', 'disabled');
    form.submit();
}