Question

使用reCaptcha时，我遇到了一个问题。在代码中，使用AJAX提交表单。在提交之前，我需要检查字段是否已填写。如果字段未填写，则不应提交。

在这种情况下，如果未填写文本字段，则会发出警报。

问题是在拒绝无效帖子后，提交按钮停止工作2到3分钟，并且reCaptcha没有给出错误。经过一段时间后，reCaptcha再次开始工作并提交按钮。

<form id="contact-form" method="post" action="javascript:void(0)">
       <input type="text" placeholder="Name" id="name">
       <input type="text" placeholder="E-Mail" id="email">
       <textarea placeholder="Message" id="message">/textarea>
       <button class="g-recaptcha pull-right" data-sitekey="#your-site-key" data-callback="sendData" type="submit"> SEND <i class="flaticon-origami34"></i> </button>
</form>

Javascripts：

function sendData(){

    console.log('send data - '); // --> works

    //send datas: 

    $("#contact-form").submit();

};

$('#contact-form').on("submit", function() {

console.log('clicked submit'); // --> works

name = $('#name').val().replace(/<|>/g, ""), // prevent xss
    email = $('#email').val().replace(/<|>/g, ""),
    msg = $('#message').val().replace(/<|>/g, "");

if (name == '' || email == '' || msg == '') {

    alert("Please fill all areas !");

} else {

    console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response: 

    // ajax to the php file to send the mail
    $.ajax({
        type: "POST",
        url: "SaveContact.php",
        data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse()
    }).done(function(status) {
        if (status == "ok") {
            // clear the form fields
            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        }
    });

}});

Answer 1

根据documentation，您还可以调用grecaptcha.reset(opt_widget_id);，其中opt_widget_id是可选的，默认为创建的第一个重新访问小部件。

Answer 2

然后你需要重置隐形recaptcha的冷却时间，你可以使用这样的黑客

var recaptchaIframe = document.querySelector('.grecaptcha-badge iframe');
recaptchaIframe.src = recaptchaIframe.src;

我没有更好的解决方案。

Answer 3

如果你在这样的脚本中显式地渲染recaptcha：

var form = grecaptcha.render('idSelector', {
  'sitekey' : 'your_sitekey',
  'callback': callableFunction

}, true)

然后，＆＃34;形式＆＃34;变量包含widget_id，因此您可以像这样重置该重新接收

grecaptcha.reset(form);

Answer 4

想出这个并想发布它以防其他人有同样的问题。 Google的示例代码将按钮ID设置为＆＃34;提交＆＃34;并致电＆＃34;提交＆＃34;来自onSubmit的功能因此而失败。将id更改为其他修复它的内容。

reCAPTCHA Invisible - 重新提交表单问题

4 个答案: