boostrap 4表单验证中的reCaptcha验证

Question

我正在使用bootstrapValidator进行表单验证，我添加了reCaptcha问题是在表单提交后显示reCaptcha错误，因为我在commitHandler内编写了代码，但是如果我在SubmitHandler之外编写了其他字段错误消息，则不会显示。我认为所以我需要像其他字段一样创建对象属性，而我不知道如何编写逻辑。像这样

reCaptcha: {
       validators: {
             //logic
     }
}

我想在表单提交时验证reCaptcha。有人能指出正确的方向吗？任何帮助将不胜感激

$(document).ready(function() {

  // Form validations
  $('#contact_form').bootstrapValidator({

    fields: {
      name: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply your first name'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: 'Please supply your email address'
          },
          emailAddress: {
            message: 'Please supply a valid email address'
          }
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: 'Please supply your phone number'
          },
          regexp: {
            regexp: /^\d{10}$/,
            message: 'Please supply a valid phone number'
          }
        }
      },
      message: {
        validators: {
          stringLength: {
            min: 10,
            max: 400,
            message: 'Please enter at least 10 characters and no more than 400'
          },
          notEmpty: {
            message: 'Enter a description of your project'
          }
        }
      },
    },

    // Success Message display
    submitHandler: function(validator, form, submitButton) {
      //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");
        }
        window.verifyRecaptchaCallback = function(response) {
          $('input[data-recaptcha]').val(response).trigger('change')
        }
      } else {
        $('.msg-error').text('');
        $captcha.removeClass("error");
        alert('reCAPTCHA marked');
        window.expiredRecaptchaCallback = function() {
          $('input[data-recaptcha]').val("").trigger('change')
        }
      }

      $('#success_message').css('opacity', '1').fadeIn().delay(3000).fadeOut();

      var bv = form.data('bootstrapValidator');

      // Use Ajax to submit form data
      $.post(form.attr('action'), form.serialize(), function(result) {

      }, 'json');
      grecaptcha.reset();
      $('#contact_form').bootstrapValidator('resetForm', true);


    }
  })

});

#success_message {
  opacity: 0;
}

.msg-error {
  color: red;
}

.error {
  color: red;
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>

<form action="contact-form.php" method="POST" class="needs-validation form-horizontal" id="contact_form" novalidate>
  <div class="form-row">
    <div class="col-md-12 mb-3 form-group">
      <label for="validationTooltip01">your name:</label>
      <input type="text" name="name" class="form-control" id="validationTooltip01" required>
      <span class="manditory">*</span>
    </div>
    <div class="col-md-6 mb-3 form-group">
      <label for="validationTooltipUsername">mail id:</label>
      <div class="input-group">
        <input type="text" name="email" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>

      </div>
      <span class="manditory">*</span>
    </div>
    <div class="col-md-6 mb-3 form-group">
      <label for="validationTooltip05">phone no:</label>
      <input type="text" name="phone" class="form-control" id="validationTooltip05" required>
      <span class="manditory">*</span>
    </div>


    <div class="form-group col-md-10 mb-3 message">
      <label for="exampleFormControlTextarea1">message:</label>
      <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" required></textarea>
      <button class="btn btn-primary image-submit" type="submit">Submit</button>
    </div>
    <!--<div class="g-recaptcha" data-sitekey="6Le335wUAAAAAHkIyp02Nd2MREmMnfGtBwiQUCr9"></div>-->
    <div class="form-group">
      <div class="g-recaptcha" id="recaptcha" data-sitekey="6Ld4Jh8TAAAAAD2tURa21kTFwMkKoyJCqaXb0uoK" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
      <!-- <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha"> -->
      <!-- <div class="help-block with-errors"></div> -->
      <span class="msg-error error"></span>
    </div>
    <!-- Success message -->
    <div class="alert alert-success" role="alert" id="success_message">Success Thanks for contacting us, we will get back to you shortly.</div>
  </div>

</form>