Ik heb een eenvoudig contactformulier in aspx. Ik wil de reCaptcha valideren (client-side) voordat ik het formulier verzend. Gelieve te helpen.
Voorbeeld code:
<%@ 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>
Ik wil de captcha valideren als ik op cmdSubmit
klik.
Gelieve te helpen.
Client side verificatie van reCaptcha - het volgende werkte voor mij :
" grecaptcha.getResponse(); " retourneert een null als reCaptcha niet is gevalideerd aan de client kant, anders retourneert het een waarde anders dan null.
Javascript Code :
var response = grecaptcha.getResponse();
if(response.length == 0)
//reCaptcha not verified
else
//reCaptch verified
Gebruik dit om Google captcha te valideren met eenvoudige javascript.
Deze code in de html body:
<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />
Deze code zet je in het hoofd gedeelte van de oproep get_action(this) methode formulier knop:
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;
}
}
Als u de Recaptcha rendert op een callback
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
met behulp van een lege DIV als plaatshouder
<div id='html_element'></div>
dan kunt u een optionele functie aanroep op een succesvolle CAPTCHA antwoord specificeren
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key',
'callback' : correctCaptcha
});
};
De recaptcha respons zal dan naar de 'correctCaptcha' functie gestuurd worden.
var correctCaptcha = function(response) {
alert(response);
};
Dit alles was van de Google API notities :
Ik'ben een beetje onzeker waarom je dit zou willen doen. Normaal gesproken zou je het g-recaptcha-response veld samen met je privésleutel sturen om veilig server-side te valideren. Tenzij je de submit knop wilde uitschakelen totdat de recaptcha succesvol was of zo - in dat geval zou het bovenstaande moeten werken.
Hoop dat dit helpt.
Paul