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" ?
-
Você colocou o reCAPTCHA dentro da tag <form> ? acredito que essa adição ao site ja o torna obrigatório.– BsalvoCommented 11/10/2017 às 11:48
-
Sim está dentro do <form> , será que poderia ser porque estou testando em um servidor local?– HBretoneCommented 11/10/2017 às 11:49
-
2Muito 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.– BsalvoCommented 11/10/2017 às 11:50
Adicione um comentário
|
2 Respostas
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.
-
-
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.– HBretoneCommented 11/10/2017 às 12:10
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>