<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>


<script type="text/javascript">


// VALIDATE THE reCAPTCHA
    function recapVerify(form){
        $.ajax({
        type:'post',
        url: 'captcha_check.php',
        data: {
            recaptcha_challenge_field:$('#recaptcha_challenge_field').val(),
            recaptcha_response_field:$('#recaptcha_response_field').val()
        }
    }).done(function(data, textStatus, jqXHR){
        if (data == 'success'){
            $('#err').addClass('hidden');
            //document.forms[0].submit(); // uncomment this line to submit your form
            alert('Success, the form and reCAPTCHA validated, your form was submitted');
        } else {
            $('#err').removeClass('hidden');
        }
    }).fail(function(jqXHR,textStatus,errorThrown){
            console.log('proxy or service failure');
    });
    }

    // WHEN CALLED THIS INSETS THE reCAPTCHA INTO THE PAGE
    function reCapInsert(){
        Recaptcha.create('6LfPK_kSAAAAAP6qLxQkrUBPOLLlrV9HFrTBJQQq',  // public key
        'recap',
            {
                theme: 'white',
                callback: Recaptcha.focus_response_field
            }
    );
    }

    // WHEN THE DOM HAS LOADED FIRE THE reCapInsert FUNCTION TO INSERT THE reCAPTCHA
    $( document ).ready(function(){
        reCapInsert();
    });
</script>
<script>
$(document).ready(function(){
    $("#myform").validate({
        rules: {
            email : {
                required : true,
                email : true
           }
        },
            submitHandler : recapVerify
    });
});

function recaptchaVerify(form){
    console.log(form);
    alert("in submit handler");


}
</script>

<form id="myform" method="post" action="test.php">

<input id="email" type="text" name="email" />
<br/>
<div id="recap"></div>
<div id="err" class="hidden" style="background-color:#FFFF00;color:#FF0000;margin:12px 0px 12px 0px;">The Captcha wasn't entered correctly. Please try again.</div>
<input id="myform-submit" type="submit" value="Validate!">
</form>




<style type="text/css">
    .hidden{
        display:none;
    }
</style>