reCaptcha无法通过形式验证

Question

我在这里的表单中使用reCaptcha，问题是错误消息在表单提交中正确显示，但是当我提交表单时错误消息并未消除。我想验证提交表单上的Recaptcha。任何人都可以帮我解决这个问题，如果条件可以正常运行，而其他条件不能正常运行，我在这里尝试使用多种方法reCaptcha。

$(document).ready(function() {

  /* contact form validation */
  //function formSubmit(){
  var Validator = function(formObject) {
    this.form = $(formObject);
    var Elements = {
      name: {
        reg: /^[a-zA-Z ]{2,20}$/,
        require: true,
        error: "Not a valid name.",
      },

      email: {
        reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
        error: "Not a valid e-mail address.",
      },
      phone: {
        reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
        error: "Not a valid number.",
      },

      message: {
        reg: /^(?!\s*$).+/,
        error: "Message field cannot be empty.",
      },


    };

    var handleError = function(element, message) {
      element.addClass('input-error');
      var $err_msg = element.parent('div');
      $err_msg.find('.error').remove();

      var error = $('<div class="error"></div>').text(message);
      error.appendTo($err_msg);
      console.log(element);


      element.on('keypress change', function() {
        $(error).fadeOut(1000, function() {
          console.log(element);
          element.removeClass('input-error');
        });
      });

    };

    /* Select Option */

    this.validate = function() {
      var errorCount = 0;

      this.form.find("input, textarea").each(function(index, field) {
        var type = $(field).data("validation");
        var validation = Elements[type];
        if (validation !== undefined) {
          var re = new RegExp(validation.reg);
          if (validation) {
            if (!re.test($(field).val())) {
              errorCount++;
              handleError($(field), validation.error);
            }
          }
        }
      })

      return errorCount == 0;
    };
  };

  /* Submit form*/

  $(function() {

    $("#contact_form").on('submit', function(e) {
      //reCAPTCHA
      var $captcha = $('#recaptcha');
      var response = grecaptcha.getResponse();

      if (response.length === 0) {
        $('.msg-error').text("reCAPTCHA is mandatory");
        if (!$captcha.hasClass("error")) {
          $captcha.addClass("error");
        }
      } else {
        alert('test');
        $('.msg-error').text('');
        $captcha.removeClass("error");
      }


      var NoErrors = new Validator(this).validate();
      if (NoErrors == true) {
        $.ajax({
          url: this.action,
          type: this.method,
          data: $(this).serialize(),
          success: function() {
            // AJAX request finished, handle the results and error msg
            $('.success_msg').fadeIn().delay(3000).fadeOut();
            //$('input[type=text], input[type=number], input[type=email], textarea').val('').removeClass('error');
            $('input[type!="submit"], textarea').val('').removeClass('error');
            grecaptcha.reset();
            //this.reset();
          }
        });

      }
      return false;
    })

  })
  //}//formSubmit
});

#success_message {
  opacity: 0;
}

.msg-error {
  color: red;
}

.error {
  color: red;
}

.g-recaptcha.error {
  border: solid 2px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form method="post" action="contact-form.php" id="contact_form" novalidate>
  <div class="detail">
    <label>name:</label>
    <input type="text" name="name" data-validation="name" />
  </div>
  <!--detail-->
  <div class="detail">
    <label>Email:</label>
    <input type="email" name="email" data-validation="email" />
  </div>
  <!--detail-->
  <div class="detail">
    <label>phone</label>
    <input type="number" name="phone" data-validation="phone" />
  </div>
  <!--detail-->
  <div class="detail message">
    <label>Message:</label>
    <textarea name="message" cols="30" rows="15" data-validation="message"></textarea>
  </div>
  <!--detail-->
  <span class="msg-error"></span>
  <div class="g-recaptcha" id="recaptcha" data-sitekey="6LeS4O8SAAAAALWqAVWnlcB6TDeIjDDAqoWuoyo9"></div>
  <div class="btn-container">
    <input type="submit" name="send" class="btn" value="Send" />
  </div>

  <div class="success_msg">
    <p>Form submitted Successfully</p>
  </div>
</form>