使用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!'; 

    } 
?> 

只想顯示如下<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) 
      } 
     });