HTML5 validation not working when using Google reCAPTCHA

[Robert_Craig]

Hello

I have recently implemented the Google reCAPTCHA v2 on my site. I am using the invisible version which only shows the reCAPTCHA if it thinks it may be a bot.

I have noticed that when I added the reCAPTCHA to my site it now disables the HTML5 validation that was working fine before. My form is a standard form which I have included the code below.

Is there a way to enable the validation so that it runs before that reCAPTCHA takes control?

 

<form action="formail.php" method="post" id="i-recaptcha">
 <div>
  <label>Name</label>
  <input type="text" name="name" placeholder="Name (Required)" required>
 </div>
 <div>
  <label>Email Address</label>
  <input type="email" name="email" placeholder="Email Address (Required)" required>
 </div>
 <div>
  <label>Country</label>
  <input type="text" name="country" placeholder="Country (Optional)">
 </div>
 <div><input type="submit" value="Submit" class="g-recaptcha" data-sitekey="****************SITE_KEY****************" data-callback="onSubmit"></div>
</form>

 

[requinix]

Some Googling (coincidentally) turns up this, where the main answers show how to trigger the reCAPTCHA validation process manually.

[Robert_Craig]

Thank you requinix.

From what I understand it ask to remove the reCAPTCHA code from the from button and place it in a div instead. So I now have this code

 

<form action="formail.php" method="post" id="i-recaptcha">
 <div class="g-recaptcha"
      data-sitekey="****************SITE_KEY****************"
      data-size="invisible"
      data-callback="onSubmit">
 </div>
 <div>
  <label>Name</label>
  <input type="text" name="name" placeholder="Name (Required)" required>
 </div>
 <div>
  <label>Email Address</label>
  <input type="email" name="email" placeholder="Email Address (Required)" required>
 </div>
 <div>
  <label>Country</label>
  <input type="text" name="country" placeholder="Country (Optional)">
 </div>
 <div><input type="submit" value="Submit"></div>
</form>

 

What I don't understand is what I need to do with this code which is on that link you forwarded

$('#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
}

 

[requinix]

There are four steps here:

1. Make reCAPTCHA not validate automatically on form submission
2. Use your own form submit handler to manually start the validation
3. Give reCAPTCHA a callback to use when it completes validation
4. Use that callback to actually submit the form for real

The first step is dealt with by data attributes, apparently. Look at the Javascript to see how it was used to satisfy the other three steps.

[Robert_Craig]

My knowledge of JavaScript is nonexistent unfortunately. I am familiar with HTML but a beginner with JS and PHP so I have no idea what to do with that JS code above. Do I just put that code in between <script> </script> tags and place it in my HTML code?

[requinix]

No, you can't just copy and paste stuff from the internet and expect it to work.

Now would be a good time to start learning some Javascript. It's actually pretty easy to pick up - you can avoid most of the tricky and confusing stuff for a long time.

data-callback="onSubmit"

When reCAPTCHA completes it will (try to) call whatever function you name there. Pick a descriptive name, but one that isn't so generic that there might be another function on your site with the same name.

If you're using jQuery,

$('#form-contact').submit(function (event) {

"form-contact" is the ID of your form. This sets up a function (aka "callback" or "handler") that will run when the form tries to submit.

event.preventDefault();

That stops the form so that it doesn't try to submit. Don't want that yet.

grecaptcha.reset();
grecaptcha.execute();

That runs the reCAPTCHA validation process.

});

The submit handler ends without doing anything else.

When reCAPTCHA succeeds it will call the function you named earlier.

function formSubmit(response) {

"response" will be the validation token but you don't really need it.

// submit the form which now includes a g-recaptcha-response input

Here is where you try to submit the form.

 

That's not the full thing you need - not only does it need a couple things changed here and there, it needs to be rewritten a bit to do what it needs to do. Here's an actual template for you to use, again assuming that you are using jQuery:

// anonymous function lets us use private variables
(function() {
  // remember the form
  var $form = $("#the id of the form");

  // whether we want to really submit the form or to trigger recaptcha
  var really = false;
  
  // when the form is submitted,
  $form.on("submit", function(e) {
    // if we're really submitting then don't do anything
    if (really) {
      return;
    }
    
    // don't submit
    e.preventDefault();

    // start recaptcha
    grecaptcha.reset();
    grecaptcha.execute();
  });
  
  // set up a "recaptchaSubmit" function for recaptcha to call when it completes
  window.recaptchaSubmit = function(token) {
    // from here on we should really submit the form
    really = true;

    // trigger a second submit
    $form.submit();
  };
})();

There are two things in there you have to pay attention to: the ID of the form (you have to change that to match your <form>) and the reCAPTCHA callback here is called "recaptchaSubmit" (you can change that name if you wish).

[Robert_Craig]

Thank you requinix.

You are right about learning JS. I am actually about to start a JS course at Seer Computing in the UK in about 3 weeks. I will go through your post now and hopefully be able to make sense of it as you have very gratefully added comments on all sections.

Thank you again for your help.

[Barand]

I don't know what their JS course is like but I'd avoid their CSS course 😊

Screenshot from Seer website...

[Robert_Craig]

Well spotted Barand. Definitely makes me think twice about the course now. 😊

 

requinix I have gone through your code and I thought I had it working but then noticed that on some of my forms I have to press the submit button twice before the form submits.

 

On this form it submits fine with just one click:

<form action="formmail.php" method="post" id="i-recaptcha">
 <div class="g-recaptcha"
  data-sitekey="****************SITE_KEY****************"
  data-size="invisible"
  data-callback="recaptchaSubmit">
 </div>
 <div>
  <input type="text" name="name" placeholder="Name (Required)" required>
 </div>
 <div>
  <input type="email" name="email" placeholder="Email Address (Required)" required>
 </div>
 <div>
  <input type="text" name="country" placeholder="Country (Required)" required>
 </div>
 <div>
  <input type="tel" name="tel" placeholder="Mobile Number (Optional)">
 </div>
 <div>
  <input type="text" name="subject" placeholder="Subject (Required)" required>
 </div>
 <div>
  <textarea name="message" placeholder="Message (Required)" required></textarea>
 </div>
 <div>
  <label>Subscribe to updates:</label>
  <input type="checkbox" name="subscribe" value="Yes" checked>
 </div>
 <div><input type="submit" value="Submit"></div>
</form>

 

But on this form and similar forms I have to press it twice:

<form action="formmail.php" method="post" id="i-recaptcha">
 <div class="g-recaptcha"
  data-sitekey="****************SITE_KEY****************"
  data-size="invisible"
  data-callback="recaptchaSubmit">
 </div>
 <div>
  <label>Name</label>
  <input type="text" name="name" placeholder="Name (Required)" required>
 </div>
 <div>
  <label>Email Address</label>
  <input type="email" name="email" placeholder="Email Address (Required)" required>
 </div>
 <div>
  <label>Country</label>
  <input id="myInput" type="text" name="country" placeholder="Country (Required)" required>
 </div>
 <div>
  <label>Mobile Number</label>
  <input type="tel" name="tel" placeholder="Mobile Number (Optional)">
 </div>
 <div><input type="submit" value="Join"></div>
</form>

 

I don't know if this has anything to do with it but when I remove lines 19, 20, 21 (the Subject input) on the first form above, then I have to also press the submit button twice before it submits. So maybe it has something to do with the subject input not being in any of my other forms?

[Robert_Craig]

I just changed the name of the line 9 in the second form (from 'name' to 'subject') and now that form submits on the first click. So what is it in the code that is needing the word 'subject' for it to submit on the first click?

[requinix]

"subject" isn't something special... unless it's special to reCAPTCHA which I wouldn't expect. What's the code for the entire page?

[Robert_Craig]

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	function post_captcha($user_response) {
		$fields_string = '';
		$fields = array(
			'secret' => '***************SECRET_KEY***************',
			'response' => $user_response
		);
		foreach($fields as $key=>$value)
		$fields_string .= $key . '=' . $value . '&';
		$fields_string = rtrim($fields_string, '&');

		$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
	curl_setopt($ch, CURLOPT_POST, count($fields));
	curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);

	$result = curl_exec($ch);
	curl_close($ch);

	return json_decode($result, true);
}

$res = post_captcha($_POST['g-recaptcha-response']);

if (!$res['success']) {
	header('Location: robot.php');
} else {
	$myemail = 'robert.craig@gmail.com';

	if ($_SERVER['REQUEST_METHOD']=='POST') {
	$name = $_POST['name'];
	$email_address = $_POST['email'];
	$country = $_POST['country'];
    $tel = $_POST['tel'];

	$to = $myemail;
	$email_subject = "Subscription";
	$email_body = "You have received a new message. ".
	"Here are the details:\n Name: $name \n Email: $email_address \n Country: $country \n Telephone: $tel";

	$headers = "From: $myemail\n";
	$headers .= "Reply-To: $email_address";

	mail($to,$email_subject,$email_body,$headers);
}

	$form_result = "<p id='inline-sub'>Subscription received.</p><br><br>";
}

	} else { ?>
<?php } ?>

 

This is the reCAPATCHA code in PHP which I got from an online tutorial. This is the code for the one that requires two clicks to submit.

 

[requinix]

Looking at that code, tell me precisely: what will happen if the browser POSTs data to the script?

[Robert_Craig]

I have no idea. As mentioned above I am a beginner with JS and PHP. After my course in JS (as long as I pass of course) I am planning on doing their PHP course.

What I did as a work around was to add a hidden input with the name subject to get it to work on first click