Google Recaptcha v2とpreventdefault

Question

私のウェブサイトにある

私はgoogle recaptchaでajaxフォームを持っています。私はevent.preventdefault（）を使用してページのリロードを維持しています。キャプチャを追加する前に、すべてがうまくいきました。しかし、今ではフォームを送信しようとするたびに、私はいつもcaptchaにそれがあったときにもチェックされていないというエラーメッセージを受け取ります。

私がevent.preventdefault（）を削除した場合、captchaを使用してもすべて正常に機能していますが、submission.phpにリダイレクトされます。

google recaptcha v2とevent.preventdefault（）は一般的に互換性がありませんか？ キャプチャを持ってページをリロードしないようにするにはどうすればよいですか？

EDIT

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 
});