recaptcha function doesn't get executed after jquery email verification

recaptcha function doesn't get executed after jquery email verification

I am struggling with this problem for days now :( I need to get recaptcher validation executed after successfully jquery email validation (which works), here is my html code:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
  2. <form id="myform" method="post" action="test.php"> 
  3. <input id="email" type="text" name="email" /> 
  4. <div id="recap"></div> <div id="err" class="hidden" 
  5. style="background-color:#FFFF00;color:#FF0000;margin:12px 
  6. 0px 12px 0px;">The Captcha wasn't entered correctly. 
  7. Please try again.</div> <input id="myform-submit" 
  8. type="submit" value="Validate!"> 
  9. </form>

Here is code for jquery email validation:

  1. $(document).ready(function(){ 
  2. $("#myform").validate({ 
  3. rules: { 
  4. email : { 
  5. required : true, email : true } 
  6. }, 
  7. submitHandler : recapVerify }); });

Function recapVerify will be called submitHandler : recapVerify after email was validated, here is code:

  1.  function recapVerify(form){ 
  2. #console.log(form); 
  3. #alert("in submit handler"); 
  4. $.ajax({ type:'post', url: 'captcha_check.php', 
  5. data: { recaptcha_challenge_field:
  6. $('#recaptcha_challenge_field').val(), 
  7. recaptcha_response_field:
  8. $('#recaptcha_response_field').val() } 
  9. }).done(function(data, textStatus, jqXHR)
  10. { if (data == 'success'){ $('#err').addClass('hidden'); 
  11. //document.forms[0].submit(); // uncomment this line 
  12. to submit your form 
  13. alert('Success, the form and reCAPTCHA validated, your 
  14. form was submitted'); } 
  15. else { $('#err').removeClass('hidden'); } 
  16. }).fail(function(jqXHR,textStatus,errorThrown)
  17. { console.log('proxy or service failure'); }); } 
  18. // WHEN CALLED THIS INSETS THE reCAPTCHA INTO THE PAGE 
  19. function reCapInsert(){ 
  20. Recaptcha.create('6LfPK_kSAAAAAP6qLxQkrUBPOLLlrV9HFrTBJQQq', 
  21. // public key 'recap', 
  22. { theme: 'white', 
  23. callback: Recaptcha.focus_response_field } ); 
  24. } 
  25. // WHEN THE DOM HAS LOADED FIRE THE reCapInsert FUNCTION TO 
  26. INSERT THE reCAPTCHA 
  27. $( document ).ready(function(){ reCapInsert(); });

Function recapVerify() gets called but no recaptcha verification will happen? I am not straightforward with jquery and javascript so I can't figure out what the problem might be. Any suggestion?