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

Question

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 -

Sometimes my recaptcha appears on page load and then hide, how could I prevent this situation? (or a better approach let me know then)
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 and enter your recaptcha PUBLIC/PRIVATE KEYS in above mentioned code.

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

Answer 1

Change button1 type to "button" and add an onclick="valid();return;" event to the button.

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

Question

1 answers

solution1
0 2013-04-22 12:05:09

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

Question

1 answers

solution1 0 2013-04-22 12:05:09

solution1
0 2013-04-22 12:05:09