Menu icon Foundation
Google recaptcha 2 and abide form validation

Hello all,
i like to integrate googles recaptcha 2 into a form and validate it with abide.
I use foundation 5, the form is already working fine, the abide validation for text and e-mail fields is also working fine.

I just want to validate the recaptcha checkbox within the form, so it would not be possible to leave the form until recaptcha is checked.

I searched a lot on this, but i could not find any solution :-(
Thanks for help!

Heinz

Foundationabideform validationrecaptcha 2

Hello all,
i like to integrate googles recaptcha 2 into a form and validate it with abide.
I use foundation 5, the form is already working fine, the abide validation for text and e-mail fields is also working fine.

I just want to validate the recaptcha checkbox within the form, so it would not be possible to leave the form until recaptcha is checked.

I searched a lot on this, but i could not find any solution :-(
Thanks for help!

Heinz

Brandon Arnold over 1 year ago

Havn't seen a solutuon for this, did you get anywhere with this?

Brandon Arnold over 1 year ago

Havn't seen a solutuon for this, did you get anywhere with this?

Heinz Tödter over 1 year ago

Hello,

yes, i found a way. After a lot of reading and searching i solved it this way:

[form method="post" action="mailer.php" name="Kontaktformular" data-abide onsubmit="return $(this) && captcha()"]

.........................................
[style]
input.test {
color: #ffffff;
font-size: 12px;
border: none;
height: 0px;
padding: 0px;

}
[/style]

[div class="row"]
[div class="large-6 medium-12 small-12 columns"]
[div class="g-recaptcha" data-sitekey="mykey"][/div]
[input type="text" class="test" name="testfeld" id="testfeld" required /]
[small class="error">Bitte bestäigen Sie die Checkbox[/small]
[/div]
......................
[script]
function captcha () {
var v = grecaptcha.getResponse();
if(v.length == 0)
{
document.getElementById('testfeld').value = "";
return false;
}
if(v.length != 0)
{
document.getElementById('testfeld').value = "1";
return true;
}
};
[/script]

This works for me :-)

Best regards

Heinz

p.s.: change the brackets :-)

Giancarlo Marino 3 months ago

Last one seems to be the only working solution for me.

Thanks Heinz.

Designer 15 days ago

I didn't want the test field to be visible/clickable so I made it a hidden form field...seems to work just fine. Basically, using Heinz's example, you just create another div with all the same label/input/small.error stuff, include the captcha element, add the script, then abide does the rest.