Best IT Recipes

How can I check google reCAPTCHA v2 using javascript / jQuery?

I have a simple contact form in aspx. Before submitting the form, I want to check reCaptcha (client side). Please, help.

Code example:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Test Form</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script> $("#cmdSubmit").click(function () { //need to validate the captcha }); </script> </head> <body> <form id="form1" runat="server"> <label class="clsLabe">First Name<sup>*</sup></label><br /> <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br /> <div class="g-recaptcha" data-sitekey="my_key"></div> <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" /> </form> </body> </html>

I want to check captcha on click cmdSubmit .

Please, help.

+64
javascript jquery recaptcha google-api
Jan 12 '15 at 12:56
source share
8 answers

Client side check reCaptcha - the following worked for me:

"grecaptcha.getResponse ();" returns null if reCaptcha is not checked on the client side, else returns a value other than zero.

Javascript Code:

 var response = grecaptcha.getResponse(); if(response.length == 0) //reCaptcha not verified else //reCaptch verified
+79
Apr 23 '15 at 10:07
source share

Use this to check google captcha using simple javascript.

This code in the html package:

 <div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div> <span id="captcha" style="margin-left:100px;color:red" />

This code is placed at the head of the get_action (this) method call button:

 function get_action(form) { var v = grecaptcha.getResponse(); if(v.length == 0) { document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty"; return false; } else { document.getElementById('captcha').innerHTML="Captcha completed"; return true; } }
+61
Feb 19 '15 at 13:42
source share

If you do Recaptcha on a callback

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

using an empty div as a placeholder

 <div id='html_element'></div>

then you can specify an optional function call on a successful CAPTCHA response

 var onloadCallback = function() { grecaptcha.render('html_element', { 'sitekey' : 'your_site_key', 'callback' : correctCaptcha }); };

Then the recaptcha response is returned to the "correctCaptcha" function.

 var correctCaptcha = function(response) { alert(response); };

All this was from the Google API notes:

Google Recaptcha v2 API Notes

I'm a little unsure why you want to do this. Usually you send the g-recaptcha-response field along with your private key to securely check the server side. If you do not want to disable the submit button until the recaptcha is successful or not, then the above should work.

Hope this helps.

Floor

+20
Jan 20 '15 at 11:49
source share

Simplified Paul replies:

Source:

 <script src="https://www.google.com/recaptcha/api.js"></script>

HTML:

 <div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

JS:

 var correctCaptcha = function(response) { alert(response); };
+14
Mar 09 '16 at 19:33
source share

I used the HarveyEV solution, but I read it incorrectly and did it using jQuery validation instead of the Bootstrap validator.

  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> <script> $("#contactForm").validate({ submitHandler: function (form) { var response = grecaptcha.getResponse(); //recaptcha failed validation if (response.length == 0) { $('#recaptcha-error').show(); return false; } //recaptcha passed validation else { $('#recaptcha-error').hide(); return true; } } }); </script>
+9
Feb 15 '16 at 20:49
source share

you can do your recaptcha using the following code

 <div id="recapchaWidget" class="g-recaptcha"></div> <script type="text/javascript"> var widId = ""; var onloadCallback = function () { widId = grecaptcha.render('recapchaWidget', { 'sitekey':'Your Site Key' }); }; </script> <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Then you can check your recaptcha using the IsRecapchaValid () method as follows.

  <script type="text/javascript"> function IsRecapchaValid() { var res = grecaptcha.getResponse(widId); if (res == "" || res == undefined || res.length == 0) { return false; } return true; } </script>
+4
Aug 05 '16 at 11:56 on
source share

I used the Palek solution in the Bootstrap validator and it works. I would add a comment to it, but I have no reputation;). Simplified version:

  $('#form').validator().on('submit', function (e) { var response = grecaptcha.getResponse(); //recaptcha failed validation if(response.length == 0) { e.preventDefault(); $('#recaptcha-error').show(); } //recaptcha passed validation else { $('#recaptcha-error').hide(); } if (e.isDefaultPrevented()) { return false; } else { return true; } });
+1
Jul 10 '15 at 1:59
source share

I thought they were all great, but I had problems with their work with javascript and C #. Here is what I did. Hope this helps someone else.

 //put this at the top of the page <script src="https://www.google.com/recaptcha/api.js"></script> //put this under the script tag <script> var isCaptchaValid = false; function doCaptchaValidate(source, args) { args.IsValid = isCaptchaValid; } var verifyCallback = function (response) { isCaptchaValid = true; }; </script> //retrieved from google and added callback <div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback"> //created a custom validator and added error message and ClientValidationFucntion <asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>
+1
Feb 15 '17 at 18:24
source share


More articles:


All Articles