When using Google Invisible Captcha automatic html form validation and required attribute does not work. Why?

Question

I am trying to implement the new Google Invisible Recaptcha and for some reason yet unknown to me the automatic html form validation and the required attributes does not seem to be working after along with the Recaptcha. I am guessing it is because of the onSubmit() function callback. Can someone let me know how to fix this issue? Thanks in advance.

Below is my implementation of a form with Google Invisible Recaptcha. The data-sitekey has been intentionally removed.

<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>
    function onSubmit(token) {
      document.getElementById("contactForm").submit();
    }
  </script>
</head>
<body>
<form id="contactForm" action="#" method="POST">
  <p>Leave a Message</p>
  <label for="inputName">Name</label>
  <input type="text" name="Name" id="inputName" placeholder="Name" required> <br>
  <label for="inputEmail">Email</label>
  <input type="email" name="Email" id="inputEmail" placeholder="Email Id" required> <br>
  <label for="inputMessage">Message</label>
  <input type="text" name="Message" id="inputMessage" placeholder="Message" required><br/>
  <button class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='onSubmit'>Submit</button>
  <button type="reset">Reset</button>
</form>
</body>
</html>

Yes I have used the right site key and secret key. This is not my first time using Google Captcha's. Encountered this problem when I was trying to use their new v2 Invisible Captcha. — nitinkaveriappa, Apr 11 '17 at 05:25
Need to invoke grecaptcha.execute() method. Try [this](https://stackoverflow.com/questions/41665935/html5-form-validation-before-recaptchas/41694352#41694352) example — Ronald Dsouza, Jun 02 '18 at 08:17

score 1 · Accepted Answer · answered Jul 06 '17 at 04:31

Create a callback function which sets the onclick property of the submit button to onSubmit function and then triggers a click.

 <script>
 function callBack(){
  document.getElementById('submit-button').addEventListener('click',onSubmit);
  document.getElementById('submit-button').click();
 }

 function onSubmit() {
 //validation code here
  document.getElementById("contactForm").submit();
 }
</script>

Set this callback function to the data-callback property

<button id='submit-button' class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='callBack'>Submit</button>

This doesn't trigger html validation. This only gives you an area to inject your own javascript validation. — sfxworks, Apr 05 '18 at 01:37

score 0 · Answer 2 · edited Jun 02 '18 at 09:13

0

You have to do it programmatically thanks to a new v2 grecaptcha method: grecaptcha.execute() so that recaptcha doesn't replace the button's default click event which was preventing the default HTML5 form validation.

See this answer from HTML5 form validation before reCAPTCHA's.

edited Jun 02 '18 at 09:13

Tim Diekmann

7,755
11
41
69

answered Jun 02 '18 at 08:19

Ronald Dsouza

400
3
8

When using Google Invisible Captcha automatic html form validation and required attribute does not work. Why?

2 Answers2