How to make google reCAPTCHA mandatory "required"

Asked

Viewed 4,123 times

2

Well, I implemented google reCAPTCHA in the forms of my site, working normal, but it is possible to send the forms without selecting the captcha, as I make it a mandatory field before Submit as a "required" ?

  • Did you put reCAPTCHA inside the <form> tag? I believe this addition to the site already makes it mandatory.

  • Yes it is inside the <form> it could be because I am testing on a local server?

  • 2

    Most likely this could be it, you’ve already taken a look at the documentation ? I also think it might work, but remember that I use reCAPTCHA on my websites and never had to manually validate.

2 answers

3


I found this to be the fastest way to implement, add this code to your header

    <script>
    window.onload = function() {
    var recaptcha = document.forms["Seu-Form"]["g-recaptcha-response"];
    recaptcha.required = true;
    recaptcha.oninvalid = function(e) {
    // fazer algo, no caso to dando um alert
    alert("Por favor complete o captchaba");
      }
   }
   </script>

Note: This works only with Html5, it is a quick solution to your problem.

  • Instead of "Seu-Form", I would put an id of my form?

  • That, any problem calls in the comments we solved.

  • If you can send the form or part of it gets better ..

  • I got it, I was missing something here, I did it the way you put it so thank you.

0

Use reCaptcha callback with jquery.validate

	$(document).ready(function () {
		$("#form").validate();
		$("#btnSubmit").prop("disabled", ($("#Form1").valid() ? false : "disabled"));
	});
		
    function recaptchaCallback(response) {
		$("#hidden-grecaptcha").val(response);
		$("#btnSubmit").prop("disabled", ($("#Form1").valid() ? false : "disabled"));
	};

	function recaptchaExpired() {
		$("#hidden-grecaptcha").val("");
		$("#btnSubmit").prop("disabled", ($("#Form1").valid() ? false : "disabled"));
	};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

    
<form id="Form1" method="post" action="">
	<div class="g-recaptcha" data-sitekey="xxx-xxxxxxxxxxxxxxxx-xx-x" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired"></div>
	<input type="text" id="hidden-grecaptcha" name="hidden-grecaptcha" style="opacity: 0; position: absolute; top: 0; left: 0; height: 1px; width: 1px;" />
	<br />
  <button id="btnSubmit" type="submit">Send</button>
</form>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.