使用JQuery的reCAPTCHA问题

Question

这次reCAPTCHA集成我很难过。

到目前为止，这是我的代码：

HTML

<div class="form_contact">
    <form id="form1" name="form1" method="post" action="#">

    <div>
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" value="" tabindex="1" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">E-mail address:</label>
          <input type="email" name="email" id="email" value="" tabindex="2" placeholder="*Required Field" />
    </div>

    <div>
          <label for="name">Message Subject:</label>
          <input type="text" name="msgTitle" id="msgTitle" value="" tabindex="3" placeholder="*Required Field" />
    </div>

    <div>
          <label for="textarea">Message:</label>
          <textarea cols="40" rows="8" name="message" id="message" tabindex="4" placeholder="*Required Field"></textarea>
        </div>

    <div>                   
          <label for="textarea">Spam Blocker:</label>

                <div class="captcha">                           
            <?php
                  require_once('recaptchalib.php');
                  $publickey = "**********************************";
                  echo recaptcha_get_html($publickey);
                ?>
        </div>                      

        <a class="myButton" tabindex="5" id="submit" name="submit" href="#">&nbsp;&nbsp;Submit&nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-2x"></i></
    </form>                 
</div>

JQuery的

<script>
    $(function(){
        $('.myButton').click(function() {
            var data= {
             name: $("#name").val(),
             email: $("#email").val(),
             msgTitle: $("#msgTitle").val(),
             message: $("#message").val()
             };


            $.ajax({
             type: "POST",
             url: "mail.php",
             data: data,
             success: function(data){
                    console.log(data);
                 }
            });

            alert('Message Sent!');
            return false;
             });            
    });                 
</script>

MAIL.php

<?php

require_once('recaptchalib.php');
  $privatekey = "*******************";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
        die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
         "(reCAPTCHA said: " . $resp->error . ")");
  } else {
    $mailto = 'sample@example.com';
    $nameField = $_POST['name'];
    $emailField = $_POST['email'];
    $emailSubject = $_POST['msgTitle'];
    $messageField = $_POST['message'];

    $body = <<<EOD
    <br><hr><br>
    Name: $nameField <br>
    Email: $emailField <br>
    Message: $messageField <br>
    EOD;

    $headers = "From: $emailField\r\n"; // This takes the email and displays it as who this email is from.
    $headers .= "Content-type: text/html\r\n"; // This tells the server to turn the coding into the text.
    $success = mail($mailto, $emailSubject, $body, $headers); // This tells the server what to send.

    echo 'message sent!';

  }
?>

如果reCAPTCHA输入不正确，我只想在<form>下面显示错误消息。

提前致谢。！

Answer 1

看起来像一个jQuery问题，你可以在表单下面创建一个占位符来推送所有错误：

</form>
<div id="errors"></div>

在您的AJAX成功通话中：

success: function(data){
         //clean it in case of multiple attempts
         $('#errors').html(data);
 }

.html（）粘贴从服务器发送的数据。

Answer 2

从上面的答案我只想添加此代码，如果你想从你的后端返回callback

    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "(reCAPTCHA said: " . $resp->error . ")");

那么你可能想要将die改成echo如下：

      echo "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "reCAPTCHA said: " . $resp->error . "";

那应该是这样的：

     $.ajax({
         type: "POST",
         url: "mail.php",
         data: data,
         success: function(data){
                $('#errors').html(data)
             }
        });