Google Recaptcha v2 et preventdefault

Question

sur mon site web J'ai un formulaire ajax avec google recaptcha. J'utilise event.preventdefault() pour empêcher le rechargement de la page. Avant d'ajouter le captcha tout fonctionnait bien. Cependant, maintenant, chaque fois que j'essaie de soumettre le formulaire, je reçois toujours le message d'erreur que le captcha n'était pas coché même quand il était.

Si je supprime le event.preventdefault() tout fonctionne correctement, même avec le captcha, seulement que je suis redirigé vers ma submission.php.

Est-ce que google recaptcha v2 et event.preventdefault() sont généralement incompatibles? Et que puis-je faire pour avoir un captcha et empêcher le rechargement de la page?

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

?> 

Merci à l'avance!

Answer 1

Comme je m'attendais, vous n'envoyez pas le formulaire entier mais seulement 3 éléments (nom, email et message). C'est pourquoi votre recaptcha est invalide, essayez d'envoyer le formulaire entier à la place:

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