Searching about setting up reCaptcha seems to lead to using jQuery validation. However I'm not sure how to do this in the context of an ajax form submission.
Presently I'm using Validity, not jQuery Validation. I have the script reference in my header and the key in place.
Where in the process should I validate the reCaptcha?
<form id="intake-form" class="grid-form" action="javascript:void(0);">
...
<div class="g-recaptcha" data-sitekey="key_here"></div>
<input type="submit" name="submit" value="Send!" />
<br />
<p id="formstatus"></p>
</form>
$("#intake-form").submit(function () {
var str = $(this).serialize();
if (validateIntakeForm()) { // validate intake fields with validity
$.ajax({
type: "POST",
url: global['base']+"intakeform",
data: str,
success: function (msg) {
$("#formstatus").ajaxComplete(function (event, request, settings) {
if (msg == 'success') {
result = '<div class="successmsg">Your request has been sent.';
$('#intake-form').clearForm();
} else {
result = 'There was a problem sending your message.<br />' + msg;
}
$(this).html(result);
});
}
});
return false;
}
});