ajax、jquery 带有 reCAPTCHA v2 的联系表格 - 如果无效则清除表格
ajax, jquery contact form with reCAPTCHA v2 - clears form if invalid
所以我终于设法让我的 jquery/ajax 联系表与 Google reCAPTCHA v2 一起工作，但如果 reCAPTCHA 未输入或无效，该表格将被清除，因此用户将不得不再次输入所有内容。 reCAPTCHA 的加载时间也非常长，因此可能很容易被忽略。如何防止它清除表单？
我找到了一些解决方案，在输入字段的值中放置了一些 php 代码，还有一些关于 html 实体的东西，我不太明白，但我想要页面表格保留为 .html 文件。是否仍然可以防止它清除表格，或者我是否需要将我的 .html 文件变成 .php 文件？
这是我的表格：
<div class="row">
<form id="ajax-contact" class="contact-form" role="form" method="post" action="mailer.php">
<div class="col-sm-4 col-sm-offset-2">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" class="form-control" placeholder="Email" required/>
</div>
</div>
<div class="row contact-wrap mymessage2">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label>Message *</label>
<textarea name="message" id="message" class="form-control" rows="8" placeholder="Type your message here." required></textarea>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LeehAsUAAAAAILDfzizJ23GHH7yPGxWBFP_3tE7"></div>
</div>
<div class="form-group">
<p>
<button type="submit" name="submit" class="btn btn-primary btn-lg">Submit Message</button>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-messages"></div>
</div>
</div>
</form>
这里是 mailer.php 调用的形式：
<?php
// If the form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// If the Google Recaptcha box was clicked
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MYKEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
$obj = json_decode($response);
// If the Google Recaptcha check was successful
if($obj->success == true) {
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
$recipient = "I-removed-this@for-now.com";
$subject = "New message from $name";
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Thank You! Your message has been sent.";
}
else {
http_response_code(500);
echo "Oops! Something went wrong, and we couldn't send your message. Check your email address.";
}
}
// If the Google Recaptcha check was not successful
else {
echo "Robot verification failed. Please try again.";
}
}
// If the Google Recaptcha box was not clicked
else {
echo "Please click the reCAPTCHA box.";
}
}
// If the form was not submitted
// Not a POST request, set a 403 (forbidden) response code.
else {
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
下面是 app.js 的形式：
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured, and your message could not be sent.');
}
});
});
});
非常感谢您的帮助！
您在 PHP 中的 reCaptcha 案例工作正常并返回成功响应。这就是它在 $.ajax()
上调用 .done() 方法的原因
else {
echo "Robot verification failed. Please try again.";
}
和
else {
echo "Please click the reCAPTCHA box.";
}
尝试向它们添加一些错误 headers，例如 http_response_code(400);
所以我终于设法让我的 jquery/ajax 联系表与 Google reCAPTCHA v2 一起工作，但如果 reCAPTCHA 未输入或无效，该表格将被清除，因此用户将不得不再次输入所有内容。 reCAPTCHA 的加载时间也非常长，因此可能很容易被忽略。如何防止它清除表单？
我找到了一些解决方案，在输入字段的值中放置了一些 php 代码，还有一些关于 html 实体的东西，我不太明白，但我想要页面表格保留为 .html 文件。是否仍然可以防止它清除表格，或者我是否需要将我的 .html 文件变成 .php 文件？
这是我的表格：
<div class="row">
<form id="ajax-contact" class="contact-form" role="form" method="post" action="mailer.php">
<div class="col-sm-4 col-sm-offset-2">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" class="form-control" placeholder="Email" required/>
</div>
</div>
<div class="row contact-wrap mymessage2">
<div class="col-sm-8 col-sm-offset-2">
<div class="form-group">
<label>Message *</label>
<textarea name="message" id="message" class="form-control" rows="8" placeholder="Type your message here." required></textarea>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LeehAsUAAAAAILDfzizJ23GHH7yPGxWBFP_3tE7"></div>
</div>
<div class="form-group">
<p>
<button type="submit" name="submit" class="btn btn-primary btn-lg">Submit Message</button>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-messages"></div>
</div>
</div>
</form>
这里是 mailer.php 调用的形式：
<?php
// If the form was submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// If the Google Recaptcha box was clicked
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MYKEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
$obj = json_decode($response);
// If the Google Recaptcha check was successful
if($obj->success == true) {
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
$recipient = "I-removed-this@for-now.com";
$subject = "New message from $name";
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Thank You! Your message has been sent.";
}
else {
http_response_code(500);
echo "Oops! Something went wrong, and we couldn't send your message. Check your email address.";
}
}
// If the Google Recaptcha check was not successful
else {
echo "Robot verification failed. Please try again.";
}
}
// If the Google Recaptcha box was not clicked
else {
echo "Please click the reCAPTCHA box.";
}
}
// If the form was not submitted
// Not a POST request, set a 403 (forbidden) response code.
else {
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
下面是 app.js 的形式：
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured, and your message could not be sent.');
}
});
});
});
非常感谢您的帮助！
您在 PHP 中的 reCaptcha 案例工作正常并返回成功响应。这就是它在 $.ajax()
.done() 方法的原因
else {
echo "Robot verification failed. Please try again.";
}
和
else {
echo "Please click the reCAPTCHA box.";
}
尝试向它们添加一些错误 headers，例如 http_response_code(400);