Question

I am trying to use an old version of the Recaptcha Validator on a .net 1.1 project, which can be found here: http://recaptcha.googlecode.com/svn/trunk/recaptcha-plugins/dotnet-old/src/Recaptcha/

The code I have is very similar to an example that can be found at the above link:

<asp:TextBox ID="EmailAddress" runat="server"></asp:TextBox>
<recatpcha:RecaptchaValidator ID="RecaptchaValidator1" runat="server" Theme="Clean" PublicKey="xxxxxxxxxxxxxx" PrivateKey="xxxxxxxxxx" ControlToValidate="EmailAddress"></recatpcha:RecaptchaValidator>
<asp:Button ID="Button1" runat="server" Text="Button" CausesValidation="true" OnClick="Button1_Click" />

The behavior I would like is simple: on page load, the user is presented with a field to enter their email address, a captcha to complete, and a submit button. On submit, if no user is found in our database with that email address, or the captcha is answered incorrectly, a new captcha is displayed along with a appropriate error message. Otherwise, they will receive an email about how to reset their password.

The main issue is that the captcha does not display on page load. When I hit the submit button however, triggering Page.Validate(), the page is reloaded and the captcha is displayed.

Based on this, I figured I’d try a different approach and call Page.Validate() in the page load event to get the captcha to show up initially. This almost worked: the captcha showed up on first page load, but when an invalid email is submitted along with a correct captcha answer, the captcha disappears when the page is reloaded, but of course, the email cannot be sent.

How can I either force the captcha to be rendered when the page is hit initially, or, prevent the captcha from being submitted when an invalid email address is entered?

Answer 1

Well, it’s not pretty, but I got it working.

Since using the RecaptchaValidator tag didn’t work the way I wanted it to, I used the recaptcha AJAX API (http://recaptcha.net/apidocs/captcha/client.html) to embed the widget on the page thusly:

$(document).ready(function() {
    Recaptcha.create("<public key>",
        "ReCaptcha", {
        theme: "clean",
        callback: Recaptcha.focus_response_field
    });
});

Then, since all the data need to validate with the recaptcha servers (challenge, publickey, etc. more info here: http://recaptcha.net/apidocs/captcha/) is in the POST, I instantiated a new RecaptchaValidator, set the remaining properties, and called the method to validate the user response.

protected void Submit_Click(object sender, System.EventArgs e) 
{
    RecaptchaValidator RecaptchaValidator1 = new RecaptchaValidator();
    RecaptchaValidator1.Page = this;
    RecaptchaValidator1.PrivateKey = "<private key>";
    RecaptchaValidator1.PublicKey = "<public key>";

    bool CaptchaPassed = RecaptchaValidator1.ValidateUserResponse();

    if (CaptchaPassed)
    {    
        //hide the captcha, do some stuff
    }       
}

Admittedly a bit hacky, but it got the job done.

NOTE – I mentioned this in the question, but just to reiterate: the server side code for this uses the old, .NET 1.1 compatible recaptcha plug-in. The link to the code for the plug-in is in the question. I have embarrassingly low rep, and can’t use any more hyperlinks >.<