jQuery validate plugin with invisible reCaptcha

Question

I'm having issues integrating the jQuery validation plugin and the Invisible reCaptcha. I followed the provided instructions by loading the api.js file, adding the following above the submit button:

<div id="recaptcha" class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxx" data-callback="formSubmit" data-size="invisible"></div>

I've also added the following function to my js file:

function formSubmit(response) {
    // submit the form which now includes a g-recaptcha-response input
    $("#open-account").submit();
    return true;
}

And this is my validation & submit handler:

jQuery('#open-account').validate({
    submitHandler: function(form){
        if (grecaptcha.getResponse()) {
            //Code for serializing the data and submit the form
            form.submit();
        } else {
            grecaptcha.reset();
            grecaptcha.execute();
        }
    }
}

The problem is that you need to submit the form twice in order to make it work. After the first submit, the console output is:

ReCAPTCHA couldn't find user-provided function: formSubmit

After the second click/submit - the form works as it should. I've googled this error and the solution that I found was to define the callback function in the global space too:

window.formSubmit = formSubmit;

But it gives me the same result - I need to click teice to submit only now the console output is:

Uncaught (in promise) null

What am I doing wrong? Thanks in advance.