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

问题:

I have a simple contact form in aspx. I want to validate the reCaptcha (client-side) before submitting the form. Please help.

Sample code:

                            
             First Name*

             
           

I want to validate the captcha on cmdSubmit click.

Please help.

回答1:

Client side verification of reCaptcha - the following worked for me :

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

Javascript Code :

var response = grecaptcha.getResponse();  if(response.length == 0)     //reCaptcha not verified  else     //reCaptch verified 

回答2:

Use this to validate google captcha with simple javascript.

This code at the html body:

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;      } } 

回答3:

If you render the Recaptcha on a callback

using an empty DIV as a placeholder

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

回答4:

Simplified Paul's answer:

Source:

HTML:

JS:

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

回答5:

I used HarveyEV's solution but misread it and did it with jQuery validate instead of Bootstrap validator.

回答6:

you can render your recaptcha using following code

Then you can validate your recaptcha by using "IsRecapchaValid()" method as follows.

回答7:

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   //put this under the script tag   //retrieved from google and added callback 
  //created a custom validator and added error message and ClientValidationFucntion 


回答8:
 
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;            }        }); 
     


回答9:
 
 
 
if (typeof grecaptcha !== 'undefined' && $("#dvCaptcha").length > 0 && $("#dvCaptcha").html() == "") {                 dvcontainer = grecaptcha.render('dvCaptcha', {                     'sitekey': ReCaptchSiteKey,                     'expired-callback' :function (response){                         recaptch.reset();                         c_responce = null;                     },                     'callback': function (response) {                         $("[id*=txtCaptcha]").val(c_responce);                         $("[id*=rfvCaptcha]").hide();                         c_responce = response;                      }                 });             }                          function callonanybuttonClick(){                               if (c_responce == null) {                     $("[id*=txtCaptcha]").val("");                     $("[id*=rfvCaptcha]").show();                      return false;                 }                 else {                     $("[id*=txtCaptcha]").val(c_responce);                     $("[id*=rfvCaptcha]").hide();                     return true;                 }              }
 
     Captcha validation is required.
 
 
   
          Captcha validation is required.
     


回答10:
 
          
     
     
     
    --%>         
     
   
  
It will work as expected.
     


回答11:
 
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.
  

 
     


 
文章来源: How can I validate google reCAPTCHA v2 using javascript/jQuery?