0

シナリオ-

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

2つの問題-

  1. ページの読み込み時にrecaptcha表示されてから非表示になることがあります。この状況を防ぐにはどうすればよいですか? （または、より良いアプローチを教えてください）
  2. ボタンの種類をsubmitからbutton検証が機能しなくなるように変更した場合<input class="button1" type="submit" value="Submit" id="button1" />、私のsubmitボタンは電子メールの検証後の 2 番目のステップにあるため、この変更を試みています。今回はレキャプチャとフォームが正しい順序で機能していません。

コード全体-

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

参考までに-

機能させるには、recaptchalib.php をインクルードしPUBLIC/PRIVATE、上記のコードにrecaptcha KEYS を入力する必要があります。

それでも不明な点がある場合は、その場合をお知らせください。

4

1 に答える 1