I'm trying to make a form with Google's recaptcha validation.
What happens is that if I do not validate the recaptcha it gives the error message asking to "check" the recaptcha but if I check the recaptcha it gives the same error asking the user to check the recaptcha
Form:
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
<form name="sentMessage" id="contactForm" novalidate>
<div class="text-center">
<h2 class="section-heading">Get In Touch</h2>
</div>
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone" id="phone">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Company" id="company">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Country" id="country">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12 text-right">
<div id="success"></div>
<div class="g-recaptcha col-md-4 nopadding" data-sitekey="6LeWfSATAAAAAJXNf_Ys78pY9FwXThC6t5JBqt0L"></div>
<button type="submit" class="btn btn-xl">Send Message</button>
</div>
</div>
</form>
AJAX:
$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var company = $("input#company").val();
var country = $("input#country").val();
var message = $("textarea#message").val();
$.ajax({
url: "../mail/form-handler.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
company: company,
country: country,
message: message
},
cache: false,
success: function(data) {
if (data === "true") {
// Success message
$('#success').html("<div class='alert alert-success text-left'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. Thank you for contacting us. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
} else {
// Fail message
jQuery('#success').html("<div class='alert alert-danger'>");
jQuery('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×").append("</button>");
jQuery('#success > .alert-danger').append("<strong>You can't proceed ! Please mark the recaptcha to confirm you are human.");
jQuery('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
}
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×").append("</button>");
$('#success > .alert-danger').append("<strong>Sorry, it seems that server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
});
},
filter: function() {
return $(this).is(":visible");
},
});
PHP
<?php
// busca a biblioteca recaptcha
require_once "../helpers/recaptchalib.php";
// sua chave secreta
$secret = 'SECRET KEY';
// resposta vazia
$response = null;
// verifique a chave secreta
$reCaptcha = new ReCaptcha($secret);
// se submetido, verifique a resposta
if ($_POST["g-recaptcha-response"]) {
$response = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
}
if ($response != null && $response->success) {
echo "true";
} else {
echo "false";
$errors[] = "Captcha mutch be filled.";
}