谷歌Recaptcha v2和預防默認

Question

我的網站上我有谷歌recaptcha ajax表單。我使用event.preventdefault（）來防止重新加載頁面。在我添加驗證碼之前，一切正常。但是，現在每當我嘗試提交表單時，我總是會收到錯誤消息，即使驗證完成，驗證碼也不會被打勾。

如果我刪除event.preventdefault（）一切正常工作，甚至與captcha，只有我重定向到我的submission.php。

google recaptcha v2和event.preventdefault（）通常不兼容？ 我該怎麼做一個驗證碼並保持頁面不被重新加載？

編輯

JAVASCRIPT：

$(document).ready(function() { 
$("#contactform").submit(function(event) { 
    $(".form-group").removeClass("has-error"), $(".help-block").remove(); 
    event.preventDefault() 
    var formData = { 
     name: $("input[name=name]").val(), 
     email: $("input[name=email]").val(), 
     message: $("textarea[name=message]").val() 
    }; 
    $.ajax({ 
     type: "POST", 
     url: "http://example.com/form-submission.php", 
     data: formData, 
     dataType: "json", 
     encode: true 

    }).done(function(data) { 
     if (! data.success) { 

      if (data.errors.name) { 
       $('#name-group').addClass('has-error'); // add the error class to show red input 
       $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input 
      } 

      if (data.errors.email) { 
       $('#email-group').addClass('has-error'); // add the error class to show red input 
       $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input 
      } 

      if (data.errors.message) { 
       $('#message-group').addClass('has-error'); // add the error class to show red input 
       $('#message-group').append('<div class="help-block">' + data.errors.message + '</div>'); // add the actual error message under our input 
      } 

      if (data.errors.captcha) { 
       $('#captcha-group').addClass('has-error'); // add the error class to show red input 
       $('#captcha-group').append('<div class="help-block">' + data.errors.captcha + '</div>'); // add the actual error message under our input 
      } 

     } else { 
      $("#contactheadline").append('<div class="submissionsuccess">' + data.message + "</div>"); 
      document.getElementById("contactform").style.display = "none"; 
      } 

    }); 
}); 
}); 

PHP：

<?php 


$errors   = array();  // array to hold validation errors 
$data   = array();  // array to pass back data 


function post_captcha($user_response) { 
    $fields_string = ''; 
    $fields = array(
     'secret' => '_key_', 
     'response' => $user_response 
    ); 
    foreach($fields as $key=>$value) 
    $fields_string .= $key . '=' . $value . '&'; 
    $fields_string = rtrim($fields_string, '&'); 

    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, 
    'https://www.google.com/recaptcha/api/siteverify'); 
    curl_setopt($ch, CURLOPT_POST, count($fields)); 
    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, True); 

    $result = curl_exec($ch); 
    curl_close($ch); 

    return json_decode($result, true); 
} 

// Call the function post_captcha 
$res = post_captcha($_POST['g-recaptcha-response']); 

if (empty($_POST['name'])) 
    $errors['name'] = 'Name is required.'; 

if (empty($_POST['email'])) 
    $errors['email'] = 'Email is required.'; 

if (empty($_POST['message'])) 
    $errors['message'] = 'Message is required.'; 

if (!$res['success']) 
    $errors['message'] = 'Please tick the Captcha.'; 


if (!empty($errors)) { 
     $data['success'] = false; 
     $data['errors'] = $errors; 

    } else { 

     $name = $_POST['name']; 
     $visitor_email = $_POST['email']; 
     $message = $_POST['message']; 
     $email_from = 'form-submission@example.com';address 
     $to = "info@example.com"; 
     $email_subject = "New Form submission"; 
     $email_body = "You have received a new message from $name ($visitor_email). \n $message \r\n". 

     $headers = "From: $email_from \r\n"; 
     $headers .= "Reply-To: $visitor_email"; 

     mail($to,$email_subject,$email_body,$headers); 

     $data['success'] = true; 
     $data['message'] = "Thank you for contacting us! We have received your message and will get back to you shortly."; 
    } 


// return all data to an AJAX call 
echo json_encode($data); 

?> 

預先感謝您！

Answer 1

正如我所料，您不是發送整個表單，而是隻發送3個元素（名稱，電子郵件和消息）。這就是爲什麼您的recaptcha無效，請嘗試發送整個表單：

var form = document.getElementById("contactform"); 
// or with jQuery 
//var form = $("#contactform")[0]; 

$.ajax({ 
    // the formData function is available in almost all new browsers. 
    data: new FormData(form), 
    // Rest of your configuration 
});