ajax，jQuery與reCAPTCHA v2的聯繫表單 - 如果無效，則清除表單

Question

因此，我最終設法讓我的jquery/ajax聯繫表單與Google reCAPTCHA v2一起工作，但如果reCAPTCHA未輸入或無效，則表單爲清除，所以用戶將不得不再次輸入所有內容。加載reCAPTCHA的時間也非常長，所以它可能很容易被忽略。我如何防止它清除表單？

我發現了一些解決方案，它們將一些php代碼放在輸入字段的值中，還有一些我不太瞭解的htmlentities，但是我希望頁面的表單保持爲.html文件。是否仍有可能阻止它清除表單，或者是否需要將我的.html文件設置爲.php文件？

這裏是我的形式：

<div class="row"> 
      <form id="ajax-contact" class="contact-form" role="form" method="post" action="mailer.php"> 
       <div class="col-sm-4 col-sm-offset-2"> 
        <div class="form-group"> 
         <label for="name">Name *</label> 
         <input type="text" name="name" id="name" class="form-control" placeholder="Name" required/> 
        </div> 
       </div> 
       <div class="col-sm-4"> 
        <div class="form-group"> 
         <label for="email">Email *</label>                     
         <input name="email" id="email" class="form-control" placeholder="Email" required/> 
        </div> 
       </div> 

       <div class="row contact-wrap mymessage2"> 
       <div class="col-sm-8 col-sm-offset-2"> 
        <div class="form-group"> 
         <label>Message *</label> 
         <textarea name="message" id="message" class="form-control" rows="8" placeholder="Type your message here." required></textarea> 
        </div>  
        <div class="form-group"> 
         <div class="g-recaptcha" data-sitekey="6LeehAsUAAAAAILDfzizJ23GHH7yPGxWBFP_3tE7"></div> 
        </div> 
        <div class="form-group"> 
         <p> 
          <button type="submit" name="submit" class="btn btn-primary btn-lg">Submit Message</button> 
         </p> 
        </div> 
       </div> 
        <div class="row"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <div id="form-messages"></div> 
         </div> 
        </div> 
      </form> 

這裏是一個由形式稱爲mailer.php：

<?php 
// If the form was submitted 
if ($_SERVER["REQUEST_METHOD"] == "POST") { 

    // If the Google Recaptcha box was clicked 
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){ 
     $captcha=$_POST['g-recaptcha-response']; 
     $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MYKEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); 
     $obj = json_decode($response); 

     // If the Google Recaptcha check was successful 
     if($obj->success == true) { 
      $name = strip_tags(trim($_POST["name"])); 
      $name = str_replace(array("\r","\n"),array(" "," "),$name); 
      $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); 
      $message = trim($_POST["message"]); 
      if (empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { 
      http_response_code(400); 
      echo "Oops! There was a problem with your submission. Please complete the form and try again."; 
      exit; 
      } 
      $recipient = "I-removed-this@for-now.com"; 
      $subject = "New message from $name"; 
      $email_content = "Name: $name\n"; 
      $email_content .= "Email: $email\n\n"; 
      $email_content .= "Message:\n$message\n"; 
      $email_headers = "From: $name <$email>"; 
      if (mail($recipient, $subject, $email_content, $email_headers)) { 
      http_response_code(200); 
      echo "Thank You! Your message has been sent."; 
      } 

      else { 
      http_response_code(500); 
      echo "Oops! Something went wrong, and we couldn't send your message. Check your email address."; 
      } 

     } 

     // If the Google Recaptcha check was not successful  
     else { 
     echo "Robot verification failed. Please try again."; 
     } 

    } 

    // If the Google Recaptcha box was not clicked 
    else { 
    echo "Please click the reCAPTCHA box."; 
    }  

} 

// If the form was not submitted 
// Not a POST request, set a 403 (forbidden) response code.   
else { 
    http_response_code(403); 
    echo "There was a problem with your submission, please try again."; 
}  
?> 

這裏是與形式而來的app.js：

$(function() { 

    // Get the form. 
    var form = $('#ajax-contact'); 

    // Get the messages div. 
    var formMessages = $('#form-messages'); 

    // Set up an event listener for the contact form. 
    $(form).submit(function(e) { 
     // Stop the browser from submitting the form. 
     e.preventDefault(); 

     // Serialize the form data. 
     var formData = $(form).serialize(); 

     // Submit the form using AJAX. 
     $.ajax({ 
      type: 'POST', 
      url: $(form).attr('action'), 
      data: formData 
     }) 
     .done(function(response) { 
      // Make sure that the formMessages div has the 'success' class. 
      $(formMessages).removeClass('error'); 
      $(formMessages).addClass('success'); 

      // Set the message text. 
      $(formMessages).text(response); 

      // Clear the form. 
      $('#name').val(''); 
      $('#email').val(''); 
      $('#message').val(''); 
     }) 
     .fail(function(data) { 
      // Make sure that the formMessages div has the 'error' class. 
      $(formMessages).removeClass('success'); 
      $(formMessages).addClass('error'); 

      // Set the message text. 
      if (data.responseText !== '') { 
       $(formMessages).text(data.responseText); 
      } else { 
       $(formMessages).text('Oops! An error occured, and your message could not be sent.'); 
      } 
     }); 

    }); 

}); 

我真的很感謝你的幫忙！

Answer 1

您在PHP中的reCaptcha案件工作正常，並返回成功的答覆。這是對$.ajax()

else { 
    echo "Robot verification failed. Please try again."; 
} 

而且

else { 
    echo "Please click the reCAPTCHA box."; 
} 

嘗試了呼叫.done()方法的原因增加了一些錯誤頭像http_response_code(400);他們兩個