I have a PHP script that will process the Google Recaptcha, how can I send an error back to javascript to print an error like it does for the other fields when user does not interact with the Captcha?
PHP Script:
<?php
function validateRecaptcha($secret, $clientResponse, $clientIp)
{
$data = http_build_query([
"secret" => $secret,
"response" => $clientResponse,
"remoteip" => $clientIp,
]);
$options = [
"http" => [
"header" =>
"Content-Type: application/x-www-form-urlencoded
".
"Content-Length: ".strlen($data)."
",
"method" => "POST",
"content" => $data,
],
];
$response = file_get_contents(
"https://www.google.com/recaptcha/api/siteverify",
false,
stream_context_create($options)
);
if($response === false)
{
return false;
}
else if(($arr = json_decode($response, true)) === null)
{
return false;
}
else
{
return $arr["success"];
}
}
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
// validate the variables ======================================================
// if any of these variables don't exist, add an error to our $errors array
if (empty($_POST['firstName']))
$errors['firstName'] = 'First Name is required.';
if (empty($_POST['lastName']))
$errors['lastName'] = 'Last Name is required.';
if (empty($_POST['companyName']))
$errors['companyName'] = 'Company Name is required.';
if (empty($_POST['companyAddress']))
$errors['companyAddress'] = 'Company Address is required.';
if (empty($_POST['city']))
$errors['city'] = 'City is required.';
if (empty($_POST['state']))
$errors['state'] = 'State is required.';
if (empty($_POST['emailAddress']))
$errors['emailAddress'] = 'Email Address is required.';
if (empty($_POST['comment']))
$errors['comment'] = 'Comment is required.';
if (empty($_POST['g-recaptcha-response']))
$errors['captcha'] = 'Captcha is required.';
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if(empty($errors))
{
if(!validateRecaptcha($secret, $_POST['g-recaptcha-response'], $_SERVER["REMOTE_ADDR"]))
{
$errors['captcha'] = 'Captcha is required.';
}
}
if ( ! empty($errors)) {
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {
// if there are no errors process our form, then return a message
// DO ALL YOUR FORM PROCESSING HERE
// THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)
// show a message of success and provide a true success variable
$data['success'] = true;
$data['message'] = 'Success!';
}
// return all our data to an AJAX call
echo json_encode($data);
Javascript:
// Start
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
$('.form-group').removeClass('has-error'); // remove the error class
$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'firstName' : $('input[name=firstName]').val(),
'lastName' : $('input[name=lastName]').val(),
'companyName' : $('input[name=companyName]').val(),
'companyAddress' : $('input[name=companyAddress]').val(),
'city' : $('input[name=city]').val(),
'state' : $('input[name=state]').val(),
'emailAddress' : $('input[name=emailAddress]').val(),
'comment' : $('input[name=comment]').val(),
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'formMaster.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if ( ! data.success) {
// handle errors for name ---------------
if (data.errors.firstName) {
$('#firstName-group').addClass('has-error'); // add the error class to show red input
$('#firstName-group').append('<div class="help-block">' + data.errors.firstName + '</div>'); // add the actual error message under our input
}
// handle errors for name ---------------
if (data.errors.lastName) {
$('#lastName-group').addClass('has-error'); // add the error class to show red input
$('#lastName-group').append('<div class="help-block">' + data.errors.lastName + '</div>'); // add the actual error message under our input
}
// handle errors for name ---------------
if (data.errors.companyName) {
$('#companyName-group').addClass('has-error'); // add the error class to show red input
$('#companyName-group').append('<div class="help-block">' + data.errors.companyName + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.companyAddress) {
$('#companyAddress-group').addClass('has-error'); // add the error class to show red input
$('#companyAddress-group').append('<div class="help-block">' + data.errors.companyAddress + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.city) {
$('#city-group').addClass('has-error'); // add the error class to show red input
$('#city-group').append('<div class="help-block">' + data.errors.city + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.state) {
$('#state-group').addClass('has-error'); // add the error class to show red input
$('#state-group').append('<div class="help-block">' + data.errors.state + '</div>'); // add the actual error message under our input
}
// handle errors for Email Address ---------------
if (data.errors.emailAddress) {
$('#emailAddress-group').addClass('has-error'); // add the error class to show red input
$('#emailAddress-group').append('<div class="help-block">' + data.errors.emailAddress + '</div>'); // add the actual error message under our input
}
// handle errors for superhero alias ---------------
if (data.errors.comment) {
$('#comment-group').addClass('has-error'); // add the error class to show red input
$('#comment-group').append('<div class="help-block">' + data.errors.comment + '</div>'); // add the actual error message under our input
}
// handle errors for recaptcha ---------------
if (data.errors.recaptcha) {
$('#recaptcha-group').addClass('has-error'); // add the error class to show red input
$('#recaptcha-group').append('<div class="help-block">' + data.errors.recaptcha + '</div>'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$('form').append('<div class="alert alert-success">' + data.message + '</div>');
// usually after form submission, you'll want to redirect
// window.location = '/thank-you'; // redirect a user to another page
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
HTML:
<!doctype html>
<html>
<head>
<title>Form Master</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="formMaster.js"></script> <!-- load our javascript file -->
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Contact Form</h1>
<!-- OUR FORM -->
<form name="form" id="form" action="formMaster.php" method="POST">
<!-- NAME -->
<div id="firstName-group" class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="lastName-group" class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" name="lastName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="companyName-group" class="form-group">
<label for="companyName">Company Name:</label>
<input type="text" class="form-control" name="companyName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="companyAddress-group" class="form-group">
<label for="companyAddress">Company Address:</label>
<input type="text" class="form-control" name="companyAddress" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="city-group" class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" name="city" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<div id="state-group" class="form-group">
<label for="state">State</label>
<select id="statea" name="state" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<!-- EMAIL ADDRESS -->
<div id="emailAddress-group" class="form-group">
<label for="emailAddress">Email Address:</label>
<input type="text" class="form-control" name="emailAddress" placeholder="rudd@avengers.com">
<!-- errors will go here -->
</div>
<!-- COMMENT -->
<div id="comment-group" class="form-group">
<label for="comment">Comment:</label>
<input type="text" class="form-control" name="comment" placeholder="Ant Man">
<!-- errors will go here -->
</div>
<div name="recaptcha" id="recaptcha-group" class="form-group">
<div class="g-recaptcha" data-sitekey="6LePAV4UAAAAADzvGMCMHHJ47y9bUnmP4OhFJTax"></div>
</div>
<button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>
</form>
</div>
</body>
</html>
But when the form is submitted other fields are highlighted with their errors except for the recaptcha section. What am I doing wrong? What needs to be done to have an error print for the recaptcha as well?
The form won't highlight the other errors plus the ReCaptcha errors because you're telling it to only check the ReCaptcha response if there are no other errors:
if(empty($errors))
{
if(!validateRecaptcha($secret, $_POST['g-recaptcha-response'], $_SERVER["REMOTE_ADDR"]))
{
$errors['captcha'] = 'Captcha is required.';
}
}
Instead just do:
if(!validateRecaptcha($secret, $_POST['g-recaptcha-response'], $_SERVER["REMOTE_ADDR"]))
{
$errors['captcha'] = 'Captcha is required.';
}