Q: reCaptcha script blocks my AJAX form from sending the e-mail 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


