reCaptcha script blocks my AJAX form from sending the e-mail - php

Question

I have created a Contact form that is sending my contact form data using AJAX.
<form action="inc/contact.php" method="POST" id="contact-form">
<div class="messages"></div>
<div class="row controls">
<div class="col-12">
<div class="input-group-meta form-group mb-30">
<label for="name">Name*</label>
<input type="text" placeholder="John Doe" name="name" required="required" data-error="Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12">
<div class="input-group-meta form-group mb-30">
<label for="email">Email*</label>
<input type="email" placeholder="john.doe#mybusiness.com" name="email" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12">
<div class="input-group-meta form-group mb-30">
<label for="message">Message*</label>
<textarea placeholder="Your message*" name="message" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-12"><button class="button-class form-button g-recaptcha" type="submit" name="submit" value="send" data-sitekey="6Lc8GI4iAAAAAFxgjs6MQwHdtp5ZjLcgIDQKsJSL" data-callback='onSubmit' data-action='submit'>Send Message</button></div>
<div class="success-message">Thanks for Contacting Us!</div>
</div>
</form>
and this is the validation script
<script>
$('button').click(function() {
validateMe();
})
function validateMe() {
// console.log('validate me');
$('label').css('color', 'white');
var error = []; //this array holds the error messages
var emailReg = /^[^\s#]+#[^\s#]+\.[^\s#]+$/; //regex for email validation
//console.log($('#contact-form input'));
$('#contact-form input').each(function() { //goes through all input fields
var inputName = $(this).attr('name'); //assigns to inputName the name of each field
if ($(this).val().length > 4) {
// console.log($(this).attr('name'));
if (inputName == 'email' && !emailReg.test($(this).val())) //if it is not a valid email
{
error.push($(this).attr('name'));
console.log('invalid email');
}
} else {
error.push($(this).attr('name')); //we are pushing the error messages into this array
}
})
//one more time for the text textarea
$('#contact-form textarea').each(function() { //goes through all input fields
var inputTextname = $(this).attr('name'); //assigns to inputName the name of each field
if ($(this).val().length < 4) {
// console.log($(this).attr('name'));
error.push($(this).attr('name'));
}
})
if (error.length == 0) {
$('#contact-form').submit(function(e) {
console.log('submitted');
$('.success-message').show(1000);
function onSubmit(token) {
document.getElementById("form-button").submit();
}
$.ajax({
type: "POST",
url: "inc/contact.php",
data: $("#contact-form").serialize(),
success: function(data) {
console.log(data)
}
})
e.preventDefault();
});
} else {
for (x = 0; x < error.length; x++) { //loops through all the different errors
$('label[for="' + error[x] + '"]').css('color', 'red');
console.log(error[x]);
}
}
}
</script>
Everything works fine up to here. When i try to add the reCaptcha v3. Script the contact form stops to send and i get the error.
I have tried to move the reCaptcha script onSubmit function to the Footer but still the same.
ReCAPTCHA couldn't find user-provided function: onSubmit