reCAPTCHA issue using JQuery - php

Question

I'm having a hard time with this reCAPTCHA integration.
Here's my code so far:
HTML
<div class="form_contact">
<form id="form1" name="form1" method="post" action="#">
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" placeholder="*Required Field" />
</div>
<div>
<label for="name">E-mail address:</label>
<input type="email" name="email" id="email" value="" tabindex="2" placeholder="*Required Field" />
</div>
<div>
<label for="name">Message Subject:</label>
<input type="text" name="msgTitle" id="msgTitle" value="" tabindex="3" placeholder="*Required Field" />
</div>
<div>
<label for="textarea">Message:</label>
<textarea cols="40" rows="8" name="message" id="message" tabindex="4" placeholder="*Required Field"></textarea>
</div>
<div>
<label for="textarea">Spam Blocker:</label>
<div class="captcha">
<?php
require_once('recaptchalib.php');
$publickey = "**********************************";
echo recaptcha_get_html($publickey);
?>
</div>
<a class="myButton" tabindex="5" id="submit" name="submit" href="#"> Submit <i class="fa fa-chevron-circle-right fa-2x"></i></
</form>
</div>
JQuery
<script>
$(function(){
$('.myButton').click(function() {
var data= {
name: $("#name").val(),
email: $("#email").val(),
msgTitle: $("#msgTitle").val(),
message: $("#message").val()
};
$.ajax({
type: "POST",
url: "mail.php",
data: data,
success: function(data){
console.log(data);
}
});
alert('Message Sent!');
return false;
});
});
</script>
MAIL.php
<?php
require_once('recaptchalib.php');
$privatekey = "*******************";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
} else {
$mailto = 'sample#example.com';
$nameField = $_POST['name'];
$emailField = $_POST['email'];
$emailSubject = $_POST['msgTitle'];
$messageField = $_POST['message'];
$body = <<<EOD
<br><hr><br>
Name: $nameField <br>
Email: $emailField <br>
Message: $messageField <br>
EOD;
$headers = "From: $emailField\r\n"; // This takes the email and displays it as who this email is from.
$headers .= "Content-type: text/html\r\n"; // This tells the server to turn the coding into the text.
$success = mail($mailto, $emailSubject, $body, $headers); // This tells the server what to send.
echo 'message sent!';
}
?>
I just want to display the error message below of the <form> if the reCAPTCHA inputs are incorrect.
Thanks in advance.!

Answer 1

Looks like a jQuery question, you can create a placeholder below the form to push in all the errors:
</form>
<div id="errors"></div>
And in your AJAX success call do:
success: function(data){
//clean it in case of multiple attempts
$('#errors').html(data);
}
.html() pastes the data sent from the server.

Answer 2

From the answer above I just wanna add this code if you want to return a callback from your backend
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"(reCAPTCHA said: " . $resp->error . ")");
then you may want to change die into echo like so:
echo "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
"reCAPTCHA said: " . $resp->error . "";
then it should be like:
$.ajax({
type: "POST",
url: "mail.php",
data: data,
success: function(data){
$('#errors').html(data)
}
});