How to validate ReCaptcha without page refresh?

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?

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

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.

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

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?

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

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.

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

Hello
Thank you very much. This error alert works.

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