问用ajax实现同步不可见的recaptcha

EN

function onSubmit(token) {

  grecaptcha.execute()
  var response = grecaptcha.getResponse();
  return response.length;
}

$('#contact-form').submit(function(event) {
  event.preventDefault();


  if (onSubmit()) {

    jQuery.ajax({
      url: "/ipostal-office/send-email.php",
      data: $('#contact-form').serialize(),
      type: "POST",
      complete: function(data) {
        console.log(data.responseText);
      },
      success: function(data) {
        // console.log(data);
        $('#contact-form').fadeOut();
        $('#success').fadeIn();
      },
      error: function(data) {
        console.log(data.responseText);
        $('#error').fadeIn();
        $('#contact-form').fadeOut();
      }
    });

  }
});

#form-div {
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  padding: 1rem 1rem 1.5rem 1rem;
}

#form-div .hide {
  display: none;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div id="form-div">

  <h2>Contact Us to Learn More</h2>

  <div id="success" class="hide">
    <p>Your message was sent successfully! </p>
  </div>

  <div id="error" class="hide">
    <p>Something went wrong, <br> try refreshing and submitting the form again.</p>
  </div>

  <form id="contact-form" action="send-email.php" method="post">

    <div class="input-field-div">
      <input type="text" id="name" name="name" placeholder=" " minlength='2' pattern="^[a-zA-Z ]*$" title="Only letters and white space allowed" required>
      <label for="name">Name*</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="title" name="title" placeholder=" ">
      <label for="title">Title</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="company" name="company" minlength='2' placeholder=" " required>
      <label for="company">Company*</label>
    </div>

    <div class="input-field-div">
      <input type="text" id="address" name="address" placeholder=" ">
      <label for="address">Address</label>
    </div>

    <div class="input-field-div">
      <input type="email" id="email" name="email" placeholder=" " required>
      <label for="email">Email*</label>
    </div>

    <div class="input-field-div">
      <input type="tel" id="phone" name="phone" placeholder=" ">
      <label for="phone">Phone</label>
    </div>

    <div class="message-field-div">
      <textarea name="message" id="message" rows="7" placeholder=" " minlength='2' required></textarea>
      <label for="message">Message</label>
    </div>

    <div id='recaptcha' class="g-recaptcha" data-sitekey="6LebLMwZAAAAAEGMbnSYotyk9do2pAXL97t0-6C8" data-callback="onSubmit" data-size="invisible"></div>

    <button id="submit-btn" type="submit">
                        Submit <i class="fas fa-paper-plane"></i>
                    </button>

  </form>

</div>