Forums

How to validate ReCaptcha without page refresh?

Xtream 08 Nov, 2016
Hello

Is it possible to validate ReCaptcha (is it entered or is it correct) without page refresh as it possible to fields like email?
We press submit and have a popover that we forget to enter email. How can I do the same for ReCaptcha?
GreyHead 08 Nov, 2016
Hi Xtream,

Basically you can't. The whole point of Captcha checks is that they are done on the server so that they are not open to spammers avoiding the JavaScript that does things like validation.

Your best solution is probably to use the new ReCaptcha where the user is validated by Google before submission.

Bob
Xtream 08 Nov, 2016
You mean new ReCaptcha this one - https://www.google.com/recaptcha/intro/index.html ? or something else?
I asked about this one from google.
Firstly I have found this function here https://crosstec.org/breezingformsdemo/index.php/breezingforms-demos/bootstrap-based-forms/recaptcha.html But didn't find the same in chronoforms.
GreyHead 08 Nov, 2016
Hi Xtream,

Yes, I mean that one - it's been in ChronoForms v5 for the last year or two. Use the Load & Check Google NoCaptcha actions.

Bob
Xtream 08 Nov, 2016
Yes, I use exactly Load & Check Google NoCaptcha but captcha validation error I can see only after button submit is pressed and page is refreshed.

But in example above validation of captcha we can see after button submit is pressed without page refreshing.

Is it possible in chronoforms or I have mistake in my form setting?
GreyHead 08 Nov, 2016
Hi Xtream,

That looks correct - how do you get a Captcha Validation error with Google ReCaptcha? I don't know how to do that.

Bob
Xtream 08 Nov, 2016
Check please this link https://crosstec.org/breezingformsdemo/index.php/breezingforms-demos/bootstrap-based-forms/recaptcha.html
If we press submit without completing captcha we will see error "The captcha is missing or wrong!" without page refresh. I don't know how it's done, I only looking for a solutions how to do the same with my form.
GreyHead 09 Nov, 2016
Hi Xtream,

Sorry, now I understand your question. I don't think that has ever been asked before. In a simple version you can add a Load JavaScript action to the form ON Load event before the HTML (Render form) action and add code like this:
jQuery(document).ready(function(jQ){
  jQ('#chronoform-form_name').submit(function(event) {
     var recaptcha = jQ("#g-recaptcha-response").val();
     if ( recaptcha === "" ) {
        event.preventDefault();
        alert("Please check the recaptcha");
     }
  });
});
Replace form_name in the second line with your form name - the event needs to be linked to the <form> tag.

Bob
Xtream 09 Nov, 2016
Hello
Thank you very much. This error alert works.
GreyHead 10 Nov, 2016
Hi Xtream,

Good to hear - I found the code on StackOverFlow and left in the JavaScript alert they had used - that could be changed to show the message in some other way - show/hide a div for example - if you prefer.

Bob
This topic is locked and no more replies can be posted.