之前的reCAPTCHA HTML5表单验证

Question

我综合了新的隐藏的reCAPTCHA（V2）框架，它在默认情况下验证与提交按钮的click事件的用户。但是，这一事件被内置HTML5表单验证之前触发。第一种形式验证，验证码后：我正在寻找一种方式，使其在预期的顺序。

Answer 1

你必须这样做编程由于采用了新的V2 grecaptcha方法：grecaptcha.execute()，这样的reCAPTCHA不会取代按钮的这是防止默认HTML5表单验证默认点击事件。

本次活动的路径是：

1. 提交按钮单击事件：浏览器内置的表单验证
2. 表单提交事件：呼叫grecaptcha.execute()
3. 验证码回调：提交表单

$('#form-contact').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

Answer 2

这里是我的解决方案，使HTML5验证+验证码隐形：

HTML：

<form id="my-form">
    <!-- Your form fields ... -->
    <div class="g-recaptcha"
        data-sitekey="..."
        data-callback="submitMyForm"
        data-size="invisible">
    </div>
    <button type="submit">Submit</button>
</form>

JS：

var myForm = $('my-form');

function submitMyForm () {
    myForm.trigger('submit', [true]);
}

$(function () {
    myForm.on('submit', function (e, skipRecaptcha) {
        if(skipRecaptcha) {
            return;
        }

        e.preventDefault();
        grecaptcha.execute();
    });
  })

Answer 3

嗨得到了工作液在这里。隐形的Recaptcha工作。

jQuery(document).ready(function() {
    var commentform = jQuery("#commentform");
    commentform.on("click", "#submit-comment", function(e) {
      if(commentform[0].checkValidity()) {
        e.preventDefault();
        grecaptcha.execute();
      }
    });
});

function submitCommentForm(data) {
    document.getElementById("commentform").submit();
}

<form action="blaba.php" method="post" id="commentform" class="comment-form">
  <div class="form-submit">
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
    <button id="submit-comment">Leave a comment</button>
  </div>
</form>

Answer 4

我是想相同的行为，但使用新的验证码，看不见一个。看一些代码和测试一些东西后，我进入这一点。主要的区别是，这里使用默认浏览器的验证，以及：

var contact_form;
$(function() {
    contact_form = $('#contact-form');
    contact_form.submit(function (event) {
        if ( ! contact_form.data('passed')) {
            event.preventDefault();
            grecaptcha.execute();
        }
    });
});
function sendContactForm(token) {
    contact_form.data('passed', true);
    contact_form.submit();
}

它基本上存储jQuery的表单对象的全局变量，包括它使用sendContactForm作为回调，但是当通过的ReCaptcha叫，这台名为passed数据变种，它允许不能防止形式。这是完全相同的行为，验证码通常会做，但这一条件。

更新：重新看我的代码正确的提醒我，它可能需要一种方式来恢复通过grecaptcha的执行之后false数据。想想看，如果你能实现这一点。

Answer 5

 let siteKey = "...";
 $("form").submit(function (eventObj) {
        var myForm = this;
        eventObj.preventDefault();
        grecaptcha.execute( siteKey, {
            action: "submit"
        })
            .then(function (token) {
                $('<input />').attr('type', 'hidden')
                    .attr('name', "g_recaptcha_response")
                    .attr('value', token)
                    .appendTo(myForm);
                myForm.submit();
            });
    });

这将执行验证码，等待响应，加入隐藏属性grecaptcha应对任何形式的浏览器时尝试提交它，然后实际提交。您需要全局变量siteKey

Answer 6

我有这个问题，因为默认的方法似乎覆盖HTML5表单验证。我也希望所有的代码是通用的，而不是硬编码的任何功能/元素名称。最后我想出了使用第3版API下面的代码 -

HTML

<form method="post" action="?" class="ui-recaptcha" name="my_form_name">
   ...
   <input type="submit" value="Submit">
</form>
<script src="//www.google.com/recaptcha/api.js?render={key}" async defer></script>

使用Javascript（我使用jQuery，但将是相当容易适应香草JS）

$('.ui-recaptcha').submit(e => {

    var form = e.target;

    if( $(form).data('recaptcha-done') )
        return;

    e.preventDefault();
    grecaptcha.execute('{key}', {'action': $(form).attr('name')}).then(token => {

        $(form).append($('<input>').attr({'type': 'hidden', 'name': 'g-recaptcha-response', 'value': token}));
        $(form).data('recaptcha-done', true);
        $(form).submit();
    });
});

我发现，只是打电话submit在一些例子上面引起了我一个循环，这将使意义看作为的ReCaptcha处理器上submit事件运行。

这将运行验证码为任何形式ui-recaptcha，经过形式name属性作为可以在验证码控制台可以看出的动作，并且然后插入令牌插入的形式。一旦运行它设置窗体上的数据属性，这样的递归调用提交不会尝试再次运行验证码。