Jquery Validate Plugin Prevent Double Submit On Validation

Question

I am using a jquery validation plugin at:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

I want to disabled submit button ONLY when validation passes:

It tried

$("#submit").click(function()
{
    $(this).attr("disabled", "disabled");
});

But this disables the submit button even if validation fails. Is there a way to only disable the submit when validation passes and a submit event occurs?

Answer 1

Looking through the source, it looks like you should be able to override the invalidHandler, something along the lines of:

$("#form").validate({
    submitHandler: function(form) {
    // disable your button here
    form.submit();
   },
   invalidHandler: function() {
     // re-enable the button here as validation has failed
   }
});

At a glance, this seems to be the way you'd want to go about doing this with the validate plugin, but I unfortunately don't have time atm to fiddle it to make sure it works.

Edit:

This should do 'er (I used a single text field with the name fname for testing):

$('#frm').bind('invalid-form.validate', function(){
    // you can add extra validation handling here if you want to
});

$('#frm').validate({
    rules: {
        fname: "required"
    },
    submitHandler: function(form){
        $('form input[type=submit]').attr('disabled', 'disabled');
        form.submit();
    }
});

submitHandler is only hit once validation has passed.