Home > Web Applications > Reloading reCAPTCHA with error via Javascript

Reloading reCAPTCHA with error via Javascript

February 20th, 2009

Today I needed to add a captcha to a web form used to send emails. Ordinarily this is pretty simple using the reCAPTCHA service. There was only one problem: the form was validated and submitted via AJAX rather than a regular HTTP post.

The reCAPTCHA client API provides a reload javascript method that will grab a new set of words for the user to decode. It was easy enough to display a small error message above the reCAPTCHA div and call this method when the user responds incorrectly.

In a typical setup, as described in the reCAPTCHA client API, the standard theme can display an error message when the user responds incorrectly. This is done by appending an error URL parameter to the challenge. The error message I was adding via javascript was showing up above the reCAPTCHA module rather than just above the text box. I wanted to display the error message included in the standard reCAPTCHA theme.

Though I’m sure there are several ways to accomplish my goal, I settled on a very easy, but very unsupported solution (read: HACK):

The message the standard template displays just above the input textbox is controlled by a class set on the recaptcha_widget_div element. A class of recaptcha_nothad_incorrect_sol causes “Type the two words:” or “Type what you hear:” to be displayed while a recaptcha_had_incorrect_sol class causes “Incorrect. Try again.” to be displayed. So to display the default error message all you need to do is change the class of the recaptcha_widget_div element.

Trying to mix this with the reCAPTCHA reload method doesn’t work as you might expect. The reload method causes an AJAX request to be sent to the reCAPTCHA server. When the response arrives, the reCAPTCHA module is updated. If you modify the class before the response arrives, your updated class will be overwritten. To fix this, you can override the default response callback Recaptcha.finish_reload.

So my final solution (hack) looked something like this (please note, the page in question was already loading the prototype library so I used it):

if(typeof Recaptcha.old_finish_reload === 'undefined') {
   Recaptcha.old_finish_reload = Recaptcha.finish_reload;
   Recaptcha.finish_reload = function(a, b, c, d) {
      Recaptcha.old_finish_reload(a, b, c, d);
      $('recaptcha_widget_div').removeClassName('recaptcha_nothad_incorrect_sol');
      $('recaptcha_widget_div').addClassName('recaptcha_had_incorrect_sol');
   };
}
Recaptcha.reload();

Web Applications , ,

  1. retsuc
    September 27th, 2010 at 05:20 | #1

    where will the line of codes be inputted?

  2. retsuc
    September 27th, 2010 at 05:21 | #2

    where will the line of codes be entered?

  3. October 11th, 2015 at 03:34 | #3

    I have purchased this pgiuln, but unfortunately I cannot find any through documentation on it. Can you tell me how to check what membership level the current logged in user belongs to?Can you direct me to any web page where I can find api/documentation about this pgiuln?

  4. November 28th, 2015 at 18:59 | #4

    Essays like this are so important to broadening people’s horizons.

  5. Avinash Chauhan
    January 13th, 2016 at 06:14 | #5
  6. April 2nd, 2016 at 14:36 | #6

    That’s cleared my thoughts. Thanks for contributing.

  7. April 30th, 2016 at 20:17 | #7

    I got what you mean , appreciate it for putting up.Woh I am delighted to find this website through google. “I would rather be a coward than brave because people hurt you when you are brave.” by E. M. Forster.

  8. June 4th, 2016 at 15:44 | #8

    Aw! That looks so fun! When I come (eventually) you have to take me out! Hahha, Bruce Lee… It’s so weird but I’m seeing face masks like that every where! I don’t know why anyone would buy that though unless you’re dressing up for Halloween or robbing a bank or something :/[]

  9. July 21st, 2016 at 05:39 | #9

    That’s an expert answer to an interesting question

  1. September 18th, 2012 at 08:44 | #1