jQuery邮件验证和recaptcha在两阶段表单提交过程中不工作

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

本文关键字：表单提交 过程中 工作 验证 recaptcha jQuery      更新时间：2023-09-26

场景 -

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

两个问题 -

    有时候我的recaptcha出现在页面加载，然后隐藏，我怎么能防止这种情况?(或者一个更好的方法让我知道)
  1. 如果我将按钮类型从submit更改为button验证停止工作<input class="button1" type="submit" value="Submit" id="button1" />，我正在尝试此更改，因为我的submit按钮是在电子邮件验证后的第二步。这一次验证码和表单没有按正确的顺序工作，让我知道我该如何处理这件事?

完整代码 -

<!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并在上述代码中输入您的recaptcha PUBLIC/PRIVATE KEYS。

如果还有什么不清楚的地方，请告诉我。

将button1类型更改为"button"，并为按钮添加onclick="valid();return;"事件

相关文章：