title: Google Recaptcha v2 and preventdefault
body: <p>on my website I have an ajax form with google recaptcha. I am using event.preventdefault() to keep the page from reloading. Before I added the captcha everything was working fine. However, now whenever I try to submit the form I always get the error message that the captcha was not ticked even when it was. </p>
  
  <p>If i remove the event.preventdefault() everything is working fine, even with the captcha, only that I get redirected to my submission.php.</p>
  
  <p>Are google recaptcha v2 and event.preventdefault() generally incompatible?
  And what can I do to have a captcha and keep the page from reloading?</p>
  
  <p>EDIT</p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>$(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('&lt;div class="help-block"&gt;' + data.errors.name + '&lt;/div&gt;'); // 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('&lt;div class="help-block"&gt;' + data.errors.email + '&lt;/div&gt;'); // 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('&lt;div class="help-block"&gt;' + data.errors.message + '&lt;/div&gt;'); // 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('&lt;div class="help-block"&gt;' + data.errors.captcha + '&lt;/div&gt;'); // add the actual error message under our input
              }
  
          } else {
              $("#contactheadline").append('&lt;div class="submissionsuccess"&gt;' + data.message + "&lt;/div&gt;");
              document.getElementById("contactform").style.display = "none";
            }
  
      });
  });
  });
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?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' =&gt; '_key_',
          'response' =&gt; $user_response
      );
      foreach($fields as $key=&gt;$value)
      $fields_string .= $key . '=' . $value . '&amp;';
      $fields_string = rtrim($fields_string, '&amp;');
  
      $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);
  
  ?&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>