Inline Google Recaptcha and parsley.js form validation

_form.scss

.FORM_CLASS {
  // Form styles
  &--complete {
     #submitForm {
       position: relative;
       &::after {
          content: "";
          position: absolute;
          z-index: 100;
          cursor: not-allowed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.5);
       }
   }
}

form.html

<script type="text/javascript" src="your_site_path/parsley.min.js"></script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript" src="your_site_path/form.js"></script>

<form id="FORM_ID" class="FORM_CLASS" action="" method="post" data-parsley-validate>
<!-- form fields -->
<button id="submitForm" class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="onSubmit" data-badge="inline" type="submit">Submit</button>
</form>

forms.js

jQuery(document).ready(function () {
    // Check captcha and parsleyjs on submit
    jQuery("#submitForm").on("click", function(token) {
        $('#FORM_ID').parsley().validate();
        if ($('#FORM_ID').parsley().isValid()) {
            jQuery("#FORM_ID").addClass("FORM_CLASS--complete");
            jQuery("#submitForm").html("Processing");
            document.getElementById("FORM_ID").submit();
        } else {
            console.log('Not valid.');
        }
    });
});