Jump to content

HTML5 validation not working when using Google reCAPTCHA


Robert_Craig

Recommended Posts

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>

 

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

<?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.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.