jQuery email validation and recaptcha is not working in a two stage form submission process

jQuery email validation and recaptcha is not working in a two stage form submission process

**Scenario** -

    PHASE1:-
    User enters email id-
        IF_NOT_EMPTY
          VALIDATE email
            IF valid_email
                  SHOW recaptcha with another form submit button( id="button2")
                  DISABLE email field
                  HIDE button1
            ELSE throw_valid_email_error
        ELSE throw_blank_email_error
       
       
    PHASE2:-
        If captcha is correct and user            
        Clicks on button2
                SHOW success message in a div(id="success")
   

**Two problems** -

 1. Sometimes my `recaptcha` appears on page load and then hide, how could I prevent this situation? (or a better approach let me know then)
 2. If I changed button type from `submit` to `button` validation stops working `<input class="button1" type="submit" value="Submit" id="button1" />` I am trying this change because my `submit` button is to be on second step after email validation. This time recaptcha and form is not working in the correct order, let me know how could I handle this thing ?

**Whole Code** -

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <style type="text/css">
    * { font-family: Verdana; font-size: 96%; }
    label { width: 10em; float: left; }
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 12em; }
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
      <script>
      $(document).ready(function(){
              $("#showcaptcha").hide();
            $("#success").hide();
            $("#button1").on('click', function(e){
            if( $("#commentForm").valid() )
            {
                //alert("Valid Email");
                $("#showcaptcha").show();
                $("#cemail").prop("disabled", true);
                $(this).hide();
                e.preventDefault();
            }
            else
            {
                alert("Check your email!!");
            }
            });
            $("#button2").on('click', function(e){
                $("#success").show();
            });
      });
      </script>
     
    </head>
    <body>
     
      <?php
    require_once('recaptchalib.php');
   
    // Get a key from https://www.google.com/recaptcha/admin/create
    $publickey = "PUBLIC_KEY";
    $privatekey = "PRIVATE_KEY";
   
    # the response from reCAPTCHA
    $resp = null;
    # the error code from reCAPTCHA, if any
    $error = null;
   
    # was there a reCAPTCHA response?
    if ($_POST["recaptcha_response_field"]) {
            $resp = recaptcha_check_answer ($privatekey,
                                            $_SERVER["REMOTE_ADDR"],
                                            $_POST["recaptcha_challenge_field"],
                                            $_POST["recaptcha_response_field"]);
   
            if ($resp->is_valid) {
                    echo "You got it!";
            } else {
                    # set the error code so that we can display it
                    $error = $resp->error;
                    echo $error;
            }
    }
    ?>
   
     <form class="cmxform" id="commentForm" method="post" action="">
     <fieldset>
       <legend>A simple demo app to connect!!</legend>
       <p>
         <label for="cemail">E-Mail</label>
         <input id="cemail" name="email" size="25"  class="required email" />
       </p>
       <p>
         <input class="button1" type="submit" value="Submit" id="button1" />
       </p>
       <div id="showcaptcha">
       <?php echo recaptcha_get_html($publickey, $error); ?>
       <input type="submit" value="submit"  id="button2" name="button2" />
       </div>
     </fieldset>
     </form>
     <div id="success">Thanks <?php if( isset($_POST['button2']) ){ echo $_POST['email']; } ?>, I will contact you soon!!</div>
    </body>
    </html>

**FYI** -

To make it working you need to include [recaptchalib.php][1] and enter your recaptcha `PUBLIC/PRIVATE` KEYS in above mentioned code.


  [1]: http://pastebin.com/UC32DdR9

If something is still unclear let me know the case then.