2

Bom, implementei o google reCAPTCHA nos formulários do meu site, funcionando normal, porém é possível enviar os formulários sem selecionar o captcha, como faço para ele ser um campo obrigatório antes do submit como um "required" ?

3
  • Você colocou o reCAPTCHA dentro da tag <form> ? acredito que essa adição ao site ja o torna obrigatório.
    – Bsalvo
    Commented 11/10/2017 às 11:48
  • Sim está dentro do <form> , será que poderia ser porque estou testando em um servidor local?
    – HBretone
    Commented 11/10/2017 às 11:49
  • 2
    Muito provavelmente pode ser isso, você ja deu uma olhada na documentação ?, de uma testada na resposta também acho que pode funcionar, mas lembrando que utilizo reCAPTCHA nos meus sites e nunca precisei validar manualmente.
    – Bsalvo
    Commented 11/10/2017 às 11:50

2 Respostas 2

3

Eu achei isso é acredito ser a maneira mais rápida para implementar, adicione esse codigo ao seu 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>

Obs: Isso funciona apenas com Html5, é uma solução rápida para seu problema.

4
  • No lugar do "Seu-Form", colocaria uma id do meu form?
    – HBretone
    Commented 11/10/2017 às 11:54
  • Isso, qualquer problema chama nos comentários que resolvemos. Commented 11/10/2017 às 12:05
  • Se você puder enviar o form ou parte dele fica melhor .. Commented 11/10/2017 às 12:06
  • Consegui, estava errando uma coisa aqui, fiz do jeito que você colocou muito obrigado.
    – HBretone
    Commented 11/10/2017 às 12:10
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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .