ajax，带有reCAPTCHA v2的jquery联系人表单-如果无效则清除表单

Question

因此，我终于设法使用Google reCAPTCHA v2使我的jquery / ajax联系人表单生效，但是如果未输入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()上调用.done()方法的原因

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

和

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

尝试添加一些错误标头，例如http_response_code(400); 对他们两个