Using reCaptcha, Lightbox, and Drupal's Form API together

Question

I've been wading through the issues of putting a Drupal form in a Lightbox2 lightbox.

Perhaps wrongly, I've resorted to doing all the validation in javascript before submitting the form (I couldn't make the normal validation return the form within the lightbox).

Anyway, i'm using:

  $form['#attributes']['onsubmit'] = 'return Drupal.mymodule.validateMailForm();';

and it works fine.

Next comes the ReCaptcha test.

if (validation == 'failed') {
  return false;
}
else { 
  return Drupal.mymodule.validateCaptcha();
}

When I finally got the recaptcha to stop submitting the form regardless of the recaptcha result (I swapped the function for 'return false'), I discovered this within my validateCaption() function:

challengeField = $("input#recaptcha_challenge_field").val();
responseField = $("input#recaptcha_response_field").val();
console.log(challengeField);
console.log(responseField);

Both variables are 'undefined'. Hmm.

So there are two smaller questions ('why isn't jquery picking up the values?' and 'can the onsubmit attribute persuade the submit function to wait while it does its business?') and one big one:

Has anybody managed to combine a Drupal form, a lightbox and a Recaptcha?

Edit: The second part of the problem - jquery not picking up the values - was because I was using an iframe within the lightbox (i couldn't make it stay otherwise). Replacing the selection above with:

challengeField = $('#iframeID').contents().find('input#recaptcha_challenge_field').val();

did the trick there.

If I can crack this further, i'll report back...

Answer 1

If you're using jQuery to get capture the values, then I would assume you need jQuery to handle the submit event, like so:

$("form#attributes").submit(function () { ... });

I'm not 100% sure about my assumption above. Anyone care to elaborate?