Googles recaptcha disrupts html 5 validation

Question

I have a form with HTML 5 validation in it that is working fine. When an user clicks <input type="submit"> the validation is triggered.

But I add Google recaptcha to it the validation is no linker triggered. Any suggestions?

<input type="submit" class="g-recaptcha btn btn-info pull-right" data-sitekey="*`***************************************" data-callback="YourOnSubmitFn">

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function YourOnSubmitFn(token) {
  document.getElementById('contact').submit();
}
</script>

Barr J · Accepted Answer · 2018-12-02T13:11:04.283

There is a workaround here and the issue is discussed also in github.

workaround using jquery:

JS:

$('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}

Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

In pure JS you can listen to form submit this way:

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

Googles recaptcha disrupts html 5 validation

1 Answers1