reCaptcha v2 validation

JavaScript
1

I’m trying to build recaptcha around a jquery form script I have that also connects to a web service, but that’s not the problem as that worked fine.

I have it set up as below and have the recaptcha widget showing nicely, but on click of submit I cant get the alert box checks to work and so the process isnt working.

<form name="form1" id="signupForm" method="post" id="myForm">
...
<div id="recapchaWidget" class="g-recaptcha"></div>
<button id="buttonSubmit" type="submit">SUBMIT</button>
</form>

<script type="text/javascript">
var widId = "";
var onloadCallback = function ()
   {
widId = grecaptcha.render('recapchaWidget', {
'sitekey':'correct key used here'
	});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="lib/jquery.validate.js"></script>
<script>
function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      console.log(res, "what!");
      if (res == "" || res == undefined || res.length == 0)
         {
          alert("Hello! I am an alert box!!");
         } else {
          alert("Hello! I am an alert box 2");
$("#signupForm").validate({
...
};
} };

I don’t get anything back from the console.log either

2

I am no JS expert (learner, in fact) but I’m struggling to see exactly what causes the IsRecapchaValid() function to be called.

3

Oh ye your right droopsnoot, at the moment when the form is submitted the id of the form (signupForm), is being used to validate the form but I now have a function before it and around it, so what has to happen I suppose is when the recaptcha returns it calls the function then what I have then is an if else statment and the form validation continues if its good to go, rather than being called first.

Umm, will have to try and work this out

4

Right have changed it about a little and still not working

<form name="form1" method="post" id="myForm" onsubmit="return ValidationEvent()">
...
<button id="buttonSubmit" type="submit">SUBMIT</button>
</form>

<script type="text/javascript">
var widId = "";
var onloadCallback = function ()
   {
widId = grecaptcha.render('recapchaWidget', {
'sitekey':'correct key here'
	});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="lib/jquery.validate.js"></script>
<script>
function ValidationEvent() {
var res = grecaptcha.getResponse(widId);
console.log(res, "what!");
if (res == "" || res == undefined || res.length == 0)
{
	alert("Hello! I am an alert box!!");
} else {
	alert("Hello! I am an alert box 2");
validate({
...
5

I have updated the above problem, but I’m sorry to say Im still struggling to get the form validation to work. I have a couple of alerts there to try and see where its broken, but not one of them appears.

<script type="text/javascript">
var verifyCallback = function(response) {
};
var onloadCallback = function() {
grecaptcha.render('show', {
'sitekey':'key working',
    'callback' : verifyCallback,
'theme' : 'light'
});
};
</script>
<form name="form1" id="signupForm" method="post" action="?">
...
<div id="show"></div>
<input id="buttonSubmit" type="submit" value="SUBMIT" />
</form>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>  

<script>
$('form').on('submit', function(e) {
	alert("Hi");
  if(grecaptcha.render == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
validate({
...
</script>

I tried changing in to this too, and still no effect

<form name="form1" id="signupForm" method="post" onsubmit="return validateForm()"  action="register.php">

<script>
 function validateForm() {
alert(response);
 if(response == "") {
e.preventDefault();
alert("You can't proceed!");
} else {
alert("Thank you");
validate({
6

Still struggling with this unfortunately, what I cant get to happen is when I submit the form it takes the sitekey to google, comes back with a value which is held, then on submit the jquery dealing with the submit doesn’t recognize it and cant get the rest of the jquery validation to work.

This is where I’m at

<form name="form1" id="signupForm" method="post"  action="?">
<input id="buttonSubmit" type="submit" value="SUBMIT" />

<script>
$(function() {
$('#signupForm').on('submit', function(e){
e.preventDefault();
alert(response);
if(response == "") {
alert("You can't proceed!");
 } else {
alert("Thank you");
validate({

And this is the recaptcha bit that Im trying to get working once the form bit works

<script type="text/javascript">
 var verifyCallback = function(response) {};
 var onloadCallback = function() {
grecaptcha.render('example3', {
'sitekey':'workingKey',
'callback' : verifyCallback,
'theme' : 'light'
});
};
</script>

I think I have this bit wrong

alert(response);

But at the moment I cant get to that line, so I’m not worrying about at the mo, but if I’m wrong it’ll be great if I can be put right.

7

Doesn’t that line need to be inside your verifyCallback function:

var verifyCallback = function(response) {
  alert(response);
  };

ETA - I don’t have a site key, so I cobbled something together with one of the test site keys and this seemed to both render a captcha (albeit with a warning about it being a test one) and return a response. Any help?

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var onloadCallback = function() {
        
        grecaptcha.render('example3', {
          'sitekey' : 'test-site-key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

This is just code off the Google site, with everything except the single recaptcha removed.

I then modified it to call a bit of PHP code when the form is submitted, that then calls ‘siteverify’ to decode the response and look for ‘true’. Obviously as I’m using the test key, it always returns true for me. You could maybe do that bit in your verifyCallback function, and perhaps only enable the form submission once you’ve got a ‘true’ response. But it would seem wise to verify the response again in the back end rather than just submit a “yes” or “no” of some kind.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.