[英]Google Recaptcha v2 and preventdefault
on my website I have an ajax form with google recaptcha. 在我的网站上,我有一个带有Google Recaptcha的Ajax表单。 I am using event.preventdefault() to keep the page from reloading.
我正在使用event.preventdefault()来防止重新加载页面。 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.
但是,现在,每当我尝试提交表单时,我总是会收到错误消息,即使验证码没有被打勾,也没有被打勾。
If i remove the event.preventdefault() everything is working fine, even with the captcha, only that I get redirected to my submission.php. 如果我删除event.preventdefault(),即使使用验证码,一切都可以正常工作,只是将我重定向到我的Submitting.php。
Are google recaptcha v2 and event.preventdefault() generally incompatible? Google Recaptcha v2和event.preventdefault()通常不兼容吗? And what can I do to have a captcha and keep the page from reloading?
我该怎么办才能获得验证码并阻止页面重新加载?
EDIT 编辑
JAVASCRIPT: JAVASCRIPT:
$(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('<div class="help-block">' + data.errors.name + '</div>'); // 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('<div class="help-block">' + data.errors.email + '</div>'); // 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('<div class="help-block">' + data.errors.message + '</div>'); // 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('<div class="help-block">' + data.errors.captcha + '</div>'); // add the actual error message under our input
}
} else {
$("#contactheadline").append('<div class="submissionsuccess">' + data.message + "</div>");
document.getElementById("contactform").style.display = "none";
}
});
});
});
PHP: PHP:
<?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' => '_key_',
'response' => $user_response
);
foreach($fields as $key=>$value)
$fields_string .= $key . '=' . $value . '&';
$fields_string = rtrim($fields_string, '&');
$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);
?>
Thank you in advance! 先感谢您!
As i expected, you are not sending the entire form but only 3 elements (name, email and message). 如我所料,您不会发送整个表格,而仅发送3个元素(名称,电子邮件和消息)。 That's why your recaptcha is invalid, try sending the entire form instead:
这就是您的验证码无效的原因,请尝试发送整个表格:
var form = document.getElementById("contactform");
// or with jQuery
//var form = $("#contactform")[0];
$.ajax({
// the formData function is available in almost all new browsers.
data: new FormData(form),
// Rest of your configuration
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.