How can I validate google reCAPTCHA v2 using javascript jQuery

Question

I have a simple contact form in aspx  I want to validate the reCaptcha  client-side  before submitting the form  Please help   Sample code        lt    Page Language  VB  AutoEventWireup  false  CodeFile  Default2 aspx vb  Inherits  Default2    gt       lt  DOCTYPE html gt       lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head runat  server  gt           lt title gt Test Form lt  title gt           lt link rel  stylesheet  href    code jquery com ui 1 11 2 themes smoothness jquery-ui css  gt           lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt           lt script src    code jquery com ui 1 11 2 jquery-ui js  gt  lt  script gt           lt link rel  stylesheet  href   resources demos style css  gt           lt script src  https   www google com recaptcha api js  async defer gt  lt  script gt           lt script gt                  cmdSubmit   click function                        need to validate the captcha                          lt  script gt        lt  head gt       lt body gt           lt form id  form1  runat  server  gt               lt label class  clsLabe  gt First Name lt sup gt   lt  sup gt  lt  label gt  lt br   gt               lt input type  text  id  txtFName  name  txtFName  class  clsInput    gt  lt br   gt               lt div class  g-recaptcha  data-sitekey  my key  gt  lt  div gt               lt img id  cmdSubmit  src  SubmitBtn png  alt  Submit Form  style  cursor pointer     gt           lt  form gt       lt  body gt       lt  html gt    I want to validate the captcha on cmdSubmit click   Please help

User · Answer

The Google reCAPTCHA version 2 ASP Net allows validating the Captcha response on the client side using its Callback functions  In this example  the Google new reCAPTCHA will be validated using ASP Net RequiredField Validator    lt script type  text javascript  gt      var onloadCallback   function              grecaptcha render  dvCaptcha                  sitekey     lt   ReCaptcha Key   gt                 callback   function  response                      ajax                       type   POST                       url   Demo aspx VerifyCaptcha                       data    response       response                             contentType   application json  charset utf-8                       dataType   json                       success  function  r                            var captchaResponse   jQuery parseJSON r d                           if  captchaResponse success                                    id  txtCaptcha    val captchaResponse success                                   id  rfvCaptcha    hide                              else                                   id  txtCaptcha    val                                      id  rfvCaptcha    show                                var error   captchaResponse  error-codes   0                                   id  rfvCaptcha    html  RECaptcha error      error                                                                                                         lt  script gt         lt asp TextBox ID  txtCaptcha  runat  server  Style  display  none    gt       lt asp RequiredFieldValidator ID  rfvCaptcha  ErrorMessage  The CAPTCHA field is required   ControlToValidate  txtCaptcha          runat  server  ForeColor  Red  Display  Dynamic    gt        lt br   gt       lt asp Button ID  btnSubmit  Text  Submit  runat  server    gt

User · Answer

Here s how we were able to validate the RECAPTCHA using  NET  FRONT-END  lt div id  quot rcaptcha quot  class  quot g-recaptcha quot  data-sitekey  quot  YOUR-KEY-GOES-HERE  quot  data-callback  quot onFepCaptchaSubmit quot  gt  lt  div gt   BACK-END      public static bool IsCaptchaValid HttpRequestBase requestBase                var recaptchaResponse   requestBase Form  quot g-recaptcha-response quot            if  string IsNullOrEmpty recaptchaResponse                         return false                     string postData   string Format  quot secret  0  amp response  1  amp remoteip  2  quot    quot  YOUR-KEY-GOES-HERE  quot   recaptchaResponse  requestBase UserHostAddress           byte   data   System Text Encoding ASCII GetBytes postData            HttpWebRequest request    HttpWebRequest WebRequest Create  quot https   www google com recaptcha api siteverify quot             request Method    quot POST quot           request ContentType    quot application x-www-form-urlencoded quot           request ContentLength   data Length           using  var stream   request GetRequestStream                          stream Write data  0  data Length                      var response    HttpWebResponse request GetResponse             var responseString    quot  quot            using  var sr   new System IO StreamReader response GetResponseStream                           responseString   sr ReadToEnd                       return System Text RegularExpressions Regex IsMatch responseString   quot   quot success  quot    s       s   true quot   System Text RegularExpressions RegexOptions Compiled          Call the above method within your Controller s POST action

User · Answer

This Client side verification of reCaptcha - the following worked for me    if reCaptcha is not validated on client side grecaptcha getResponse    returns null  else is returns a value other than null   Javascript Code    var response   grecaptcha getResponse     if response length    0        reCaptcha not verified  else       reCaptch verified

User · Answer

Source Link    You can simply check on client side using  grecaptcha getResponse   method            var rcres   grecaptcha getResponse              if rcres length               grecaptcha reset                showHideMsg  Form Submitted    success               else              showHideMsg  Please verify reCAPTCHA   error

User · Answer

Use this to validate google captcha with simple javascript   This code at the html body    lt div class  g-recaptcha  id  rcaptcha  style  margin-left  90px   data-sitekey  my key  gt  lt  div gt   lt span id  captcha  style  margin-left 100px color red    gt    This code put at head section on call get action this  method form 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

User · Answer

I used HarveyEV s solution but misread it and did it with jQuery validate instead of Bootstrap validator      lt script src  http   ajax aspnetcdn com ajax jquery validate 1 14 0 jquery validate min js  gt  lt  script gt     lt script gt          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                               lt  script gt

User · Answer

Simplified Paul s answer   Source    lt script src  https   www google com recaptcha api js  gt  lt  script gt    HTML    lt div class  g-recaptcha  data-sitekey  YOUR KEY  data-callback  correctCaptcha  gt  lt  div gt    JS   var correctCaptcha   function response            alert response

User · Answer

I thought all of them were great but I had troubles actually getting them to work with javascript and c   Here is what I did  Hope it helps someone else     put this at the top of the page  lt script src  https   www google com recaptcha api js  gt  lt  script gt     put this under the script tag  lt script gt  var isCaptchaValid   false  function doCaptchaValidate source  args        args IsValid   isCaptchaValid    var verifyCallback   function  response        isCaptchaValid   true      lt  script gt     retrieved from google and added callback  lt div class  g-recaptcha  data-sitekey  sitekey  data-callback  verifyCallback  gt     created a custom validator and added error message and ClientValidationFucntion  lt asp CustomValidator runat  server  ID  CustomValidator1  ValidationGroup  Initial  ErrorMessage  Captcha Required  ClientValidationFunction  doCaptchaValidate   gt

User · Answer

I used Palek s solution inside a Bootstrap validator and it works  I d have added a comment to his but I don y have the rep    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

User · Answer

Unfortunately  there s no way to validate the captcha on the client-side only  web browser   because the nature of captcha itself requires at least two actors  sides  to complete the process  The client-side - asks a human to solve some puzzle  math equitation  text recognition  and the response is being encoded by an algorithm alongside with some metadata like captcha solving timestamp  pseudo-random challenge code  Once the client-side submits the form with a captcha response code  the server-side needs to validate this captcha response code with a predefined set of rules  ie  if captcha solved within 5 min period  if the client s IP addresses are the same and so on  This a very general description  how captchas works  every single implementation  like Google s ReCaptcha  some basic math equitation solving self-made captchas   but the only one thing is common - client-side  web browser  captures users  response and server-side  webserver  validates this response in order to know if the form submission was made by a human or a robot  NB  The client  web browser  has an option to disable the execution of JavaScript code  which means that the proposed solutions are completely useless

User · Answer

If you render the Recaptcha on a callback   lt script src  https   www google com recaptcha api js onload onloadCallback amp render explicit  async defer gt  lt  script gt    using an empty DIV as a placeholder   lt div id  html element  gt  lt  div gt    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                The recaptcha response will then be sent to the  correctCaptcha  function   var correctCaptcha   function response        alert response        All of this was from the Google API notes    Google Recaptcha v2 API Notes  I m a bit unsure why you would want to do this   Normally you would send the g-recaptcha-response field along with your Private key to safely validate server-side   Unless you wanted to disable the submit button until the recaptcha was sucessful or such - in which case the above should work   Hope this helps   Paul

User · Answer

you can render your recaptcha using following code   lt div id  recapchaWidget  class  g-recaptcha  gt  lt  div gt    lt script type  text javascript  gt     var widId          var onloadCallback   function             widId   grecaptcha render  recapchaWidget          sitekey   Your Site Key                          lt  script gt     lt script src  https   www google com recaptcha api js onload onloadCallback amp render explicit  async defer gt  lt  script gt    Then you can validate your recaptcha by using  IsRecapchaValid    method as follows     lt script type  text javascript  gt       function IsRecapchaValid                 var res   grecaptcha getResponse widId         if  res          res    undefined    res length    0                       return false                    return true            lt  script gt

User · Answer

You cannot validate alone with JS only  But if you want to check in the submit button that reCAPTCHA is validated or not that is user has clicked on reCAPTCHA then you can do that using below code   let recaptchVerified   false  firebase initializeApp firebaseConfig   firebase auth   languageCode    en   window recaptchaVerifier   new firebase auth RecaptchaVerifier  recaptcha-container         callback   function response            recaptchVerified   true             reCAPTCHA solved  allow signInWithPhoneNumber                             expired-callback   function                Response expired  Ask user to solve reCAPTCHA again                            Here I have used a variable recaptchVerified where I make it initially false and when Recaptcha is validated then I make it true  So I can use recaptchVerified variable when the user click on the submit button and check if he had verified the captcha or not

User · Answer

x000D   x000D  if  typeof grecaptcha      undefined   amp  amp      dvCaptcha   length  gt  0  amp  amp      dvCaptcha   html            x000D                  dvcontainer   grecaptcha render  dvCaptcha     x000D                       sitekey   ReCaptchSiteKey  x000D                       expired-callback   function  response   x000D                          recaptch reset    x000D                          c responce   null  x000D                         x000D                       callback   function  response    x000D                              id  txtCaptcha    val c responce   x000D                              id  rfvCaptcha    hide    x000D                          c responce   response  x000D   x000D                        x000D                      x000D                x000D               x000D              function callonanybuttonClick    x000D                x000D                  if  c responce    null    x000D                          id  txtCaptcha    val      x000D                          id  rfvCaptcha    show    x000D   x000D                      return false  x000D                    x000D                  else   x000D                          id  txtCaptcha    val c responce   x000D                          id  rfvCaptcha    hide    x000D                      return true  x000D                    x000D               x000D    x000D   lt div id  dvCaptcha  class  captchdiv  gt  lt  div gt  x000D       lt asp TextBox ID  txtCaptcha  runat  server  Style  display  none    gt  x000D       lt label id  rfvCaptcha  style  color red display none font-weight normal   gt Captcha validation is required  lt  label gt  x000D   x000D   x000D              Captcha validation is required

User · Answer

lt    Page Language  C   AutoEventWireup  true  CodeFile  Default aspx cs  Inherits   Default    gt    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head runat  server  gt       lt title gt  lt  title gt       lt script src  https   www google com recaptcha api js  gt  lt  script gt       lt script type  text javascript  gt          function get action                 var v   grecaptcha getResponse                console log  Resp    v               if  v                          document getElementById  captcha   innerHTML    You can t leave Captcha Code empty                   return false                            else                   document getElementById  captcha   innerHTML    Captcha completed                   return true                               lt  script gt   lt  head gt   lt body gt       lt form id  form1  runat  server  onsubmit  return get action     gt       lt div gt       lt div class  g-recaptcha  data-sitekey  6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC F0-RBS  gt  lt  div gt       lt  div gt      lt  --  lt input type  submit  value  Button    gt --  gt      lt asp Button ID  Button1  runat  server         Text  Button    gt       lt div id  captcha  gt  lt  div gt       lt  form gt   lt  body gt   lt  html gt    It will work as expected

[javascript] How can I validate google reCAPTCHA v2 using javascript/jQuery?

Examples related to javascript

Examples related to jquery

Examples related to asp.net

Examples related to google-api

Examples related to recaptcha