How to make Google reCAPTCHA mandatory " required"
Well, I implemented Google reCAPTCHA on my site forms, working normally, but it is possible to send the forms without selecting the captcha, how do I make it a mandatory field before submitting as a "required" ?
2
2 answers
I found this is I believe 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 only works with Html5, it's a quick fix to your problem.
3
Author: Vinicius Gularte, 2017-10-11 11:48:43
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>
1
Author: Albertino Júnior, 2018-05-15 13:34:02