Prevent duplicate form submissions with jQuery validate

I am using jQuery validate on forms throughout my site and I would like to use this to prevent duplicate submissions - my first thought was to simply disable the button on click but that doesn't work as it then means that the user only ever have one go at submission as, once the validation kicks in, the button is now disabled.

I have found some stuff online which shows that you can add something into the submit handler but I cannot get it to work and iI need a solution quickly!

FYI my validate is called like:

// Initialize
var validator = $(".form-validate-jquery").validate({
ignore: ':disabled, :hidden, .select2-search__field', // ignore hidden fields
errorClass: 'validation-error-label',
successClass: 'validation-valid-label',
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
},

// Different components require proper error label placement
errorPlacement: function(error, element) {

// Styled checkboxes, radios, bootstrap switch
if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) {
if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo( element.parent().parent().parent().parent() );
}
else {
error.appendTo( element.parent().parent().parent().parent().parent() );
}
}

// Unstyled checkboxes, radios
else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
error.appendTo( element.parent().parent().parent() );
}

// Input with icons and Select2
else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
error.appendTo( element.parent() );
}

// Inline checkboxes, radios
else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
error.appendTo( element.parent().parent() );
}

// Input group, styled file input
else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
error.appendTo( element.parent().parent() );
}

else {
error.insertAfter(element);
}
},
messages: {
custom: {
required: "This is a custom error message",
},
agree: "Please accept our policy",
required: "Please fill in this field"
}
});

All submit buttons have a class of submit so can be targetted quite easily.

What I would like is two fold:

1) When the user SUCCESSFULLY submits the form they are prevented from doing so again
2) If the user then focus in any field in the form (a click or tab for example) this should then remove the restriction so they could change something and submit again