Невидимая reCaptcha: не может сделать рабочий вызов AJAX
Форма прошла проверку JS и работала нормально. Затем мне пришлось реализовать невидимую reCaptcha с работающей валидацией.
Код выглядит так:
index.html
//In the head I've
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://google.com/recaptcha/api.js?onload=initRecaptcha&render=explicit"></script>
//then form comes
<form enctype="multipart/form-data" method="POST" id="myForm" class="callback">
<div class="inputs">
<label class="input input-name required">
<span class="placeholder">Name</span>
<input type="text" name="name">
</label>
<label class="input input-phone required">
<span class="placeholder">Phone</span>
<input type="text" name="phone" maxlength="12">
</label>
<label class="input input-mail">
<span class="placeholder">Email</span>
<input type="text" name="email">
</label>
</div>
<div class="check">
<label>
<input class="check-agree" type="checkbox" name="agree" checked="checked" value="1">
<span class="label">I agree <span class="agree-text js-agree-text">with terms and conditions</span></span>
</label>
<div id="status"></div>
</div>
<div class="submit-wrapper">
<label class="submit">
<input class="submit-form-button js-submit-form" type="submit" value="Submit">
</label>
</div>
<div id="form-recaptch"></div>
</form>
//and in the end
<script type="text/javascript" src="js/form.js"></script>
form.js идет дальше:
var submit_form_outer;
var initRecaptcha = function(){
if ( document.getElementById("form-recaptch") ) {
recaptcha = grecaptcha.render("form-recaptch", {
'sitekey' : 'code',
'theme' : 'dark',
'badge' : 'inline',
'size' : 'invisible',
'callback' : submit_form_outer
});
}
}
$(function () {
$('.callback').submit(function (e) {
submit_form($(this));
e.preventDefault();
/*stop refresh*/
e.stopPropagation();
});
/*More Functions*/
function validateEmail(form) {
var email = form.find('[name="email"]');
var re = /.+@.+\..+/g;
if( re.test(email.val()) || email.val() === ""){
return true;
} else {
email.closest('.input').addClass('error');
return false;
}
}
function hasErrors (form) {
var required = form.find('.required');
var has_errors = false;
required.each(function(){
if(!$(this).find('input').val()){
$(this).addClass('error');
has_errors = true;
}
});
return has_errors;
}
function submit_form() {
if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){
return false;
}
grecaptcha.execute();
var container = $("#form-recaptch").parents("form");
$.ajax({
method: "POST",
url: "ajax.php",
data: container.serialize(),
success: function (responseObj) {
container.submit();
$('#myForm input').val('');
$('#myForm textarea').val('');
$('#status').html(responseObj);
},
error: function (xhr, error) {
console.debug(xhr);
console.debug(error);
$("#status").html("Failed.");
},
});
}
submit_form_outer = submit_form;
function Form () {
/*...*/
/*More Functions*/
$('.form').on('click', '.js-agree-text', function () {
showAgreeBox();
openFormPanel();
return false;
});
$('.form').on('click', '.js-no-agree', function () {
agreeNo();
return false;
});
$('.form').on('click', '.js-yes-agree', function () {
agreeYes();
return false;
});
$('.check-agree').change(function() {
var form = $(this).closest('.form');
if($(this).is(":checked")) {
form.find('.js-submit-form').removeClass('disabled');
} else {
form.find('.js-submit-form').addClass('disabled');
}
}
/*More Functions*/
this.callback = function () {
showThankBox();
openFormPanel();
$.fn.fullpage.setAllowScrolling(false);
}
}
var mainform = new Form ();
});
И ajax.php с phpMailer:
<?php
$captcha;
if ( isset($_POST['g-recaptcha-response']) ) {
$captcha = $_POST['g-recaptcha-response'];
}
if( !$captcha ){
$response = array (
'status' => 'error',
'info' => 'Please check the the captcha form.'
);
echo json_encode($response);
exit;
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = trim($_POST["phone"]);
}
$secretKey = "key";
$ip = $_SERVER['REMOTE_ADDR'];
$fields = array(
'secret' => $secretKey,
'response' => $captcha,
'remoteip' => $ip
);
$ch = curl_init("https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 15);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($fields));
$responseKeys = json_decode(curl_exec($ch));
curl_close($ch);
if(intval($responseKeys["success"]) !== 1) {
$response = array (
'status' => 'spam',
'info' => 'You look like a spam.'
);
echo '<span style="color:red;">'.json_encode($response).'</span>';
exit;
} else {
require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
if(!$mail->send())
{
echo "Mailer Error: " . $mail->ErrorInfo;
}
else
{
echo "Message has been sent successfully";
}
}
?>
Итак, проблема в том, что CAPTCHA даже не проверяет форму.
Например, у меня есть другой веб-сайт, на котором конфигурация довольно схожая, но с другой проверкой, поэтому каждый раз, когда я нажимаю кнопку "Отправить", отображаются изображения CAPTCHA, и я должен пройти тест.
В этом случае ничего не показано. Только {"status":"error","info":"Please check the the captcha form."} появляется сообщение о том, что тест CAPTCHA пропущен и не выполнен.
Я хочу сохранить проверку рабочей формы и заставить все работать вместе. Любые модификации / оптимизации приветствуются.
ОБНОВЛЕНИЕ: я обновил весь мой код, потому что у меня были некоторые ошибки. И я думаю, что-то не так с callback функция
0 ответов
Так что после долгого копания я обнаружил, что проблема была в success метод. Точнее я разместил container.submit(); в этом, и это была проблема, которая вызвала бесконечный цикл.
Итак, финальный form.js выглядит так:
var submit_form_outer;
var initRecaptcha = function(){
if ( document.getElementById("form-recaptcha") ) {
recaptcha = grecaptcha.render("form-recaptcha", {
'sitekey' : '6',
'theme' : 'dark',
//'type' : 'image',
'badge' : 'inline',
'size' : 'invisible',
'callback' : submit_form_outer
});
}
}
$(function () {
submit_form_outer = submit_form;
$('.callback').submit(function (e) {
submit_form($(this));
e.preventDefault();
});
/*some functions*/
function validateEmail(form) {
var email = form.find('[name="email"]');
var re = /.+@.+\..+/g;
if( re.test(email.val()) || email.val() === ""){
return true;
} else {
email.closest('.input').addClass('error');
return false;
}
}
function hasErrors (form) {
var required = form.find('.required');
var has_errors = false;
required.each(function(){
if(!$(this).find('input').val()){
$(this).addClass('error');
has_errors = true;
}
});
return has_errors;
}
function Form () {
/*more functions and validations*/
$('.form').on('click', '.js-submit-form', function () {
var form = $(this).closest('.form');
var agree = form.find('.check-agree').prop('checked');
if ((!agree) || ( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))))
return false;
else {
if ( grecaptcha.getResponse() !== 0 ) {
grecaptcha.execute();
}
}
});
function resetForm () {
$('.form input[type="text"], .form textarea').each(function () {
$(this).val('');
});
$('.form .placeholder').removeClass('focused');
}
}
function submit_form() {
if( hasErrors($("form#myForm")) || !validateEmail($("form#myForm"))){
return false;
}
var container = $("#form-recaptcha").parents("form");
$.ajax({
method: "POST",
url: "ajax.php",
data: container.serialize(),
beforeSend: function(e) {
$("#status").html("working...");
},
success: function (responseObj, textStatus, xhr) {
$('#myForm').trigger("reset");
$('#status').html('sent');
showThankBox();
grecaptcha.reset();
},
error: function (responseObj, xhr, error) {
$("#status").html("error.");
grecaptcha.reset();
},
});
grecaptcha.reset();
}
var mainform = new Form ();
});