如果HTML5验证通过,如何运行reCaptcha？

Question

通常情况下,HTML5表单验证运行之前的submit事件.

有了这个

<form id="myForm">
    <input  type="text" name="foo" required />

    <button type="submit"> Submit </button>

</form>

<script>
    $("#myForm").on('submit',function(){
        console.log("I'm entering the submit event handler");
    });
</script>

如果输入字段为空,则提交事件处理程序不会运行.只有在HTML5验证(required在本例中为属性)已通过时才会触发它.

我希望在HTML5验证之后运行验证码; 为什么我不得不惹恼用户编写验证码,如果以后我会警告他有丢失的字段？首先,我应该强迫用户以正确的方式做所有事情,然后确保它是一个人而不是机器人,恕我直言.

显然,reCaptcha会在其附加的表单上执行某些操作,从而删除HTML5验证功能.

例如,使用最新的Invisible reCaptcha:

<form id="myForm">
    <input  type="text" name="foo" required />

    <button type="submit"
           class="g-recaptcha" 
    data-sitekey="your_site_key" 
   data-callback='myCallback'> Submit </button>

</form>

<script>
    function myCallback(token){
        $("#myForm").submit();
    }

    $("#myForm").on('submit',function(){
        console.log("I'm entering the submit event handler");
    });
</script>

表格将与空字段一起提交,而不会通知用户其强制性.

有关它为何如此行事的任何线索？有没有办法可以指示reCaptcha在控制之前运行HTML5表单验证？

Answer 1

而不是直接将reCAPTCHA属性附加到按钮,您必须将它们添加到div,然后grecaptcha.execute();在表单提交上使用.

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="myForm">
    Name: (required) <input id="field" name="field" required>
    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="your_site_key"
         data-callback="onCompleted"
         data-size="invisible"></div>
    <button id='submit'>submit</button>
</form>
<script>
    $('#myForm').submit(function(event) {
        console.log('validation completed.');

        event.preventDefault(); //prevent form submit before captcha is completed
        grecaptcha.execute();
    });

    onCompleted = function() {
        console.log('captcha completed.');
    }
</script>

当您将reCAPTCHA属性添加到按钮时,Google只需向按钮添加一个单击侦听器,并在单击该按钮时执行reCAPTCHA.没有添加提交侦听器.HTML5验证仅通过单击提交按钮触发,并在提交事件之前运行.这就是为什么我们必须确保reCAPTCHA 在提交事件之后运行.显然,在内部HTML5验证被触发之前,将处理reCAPTCHA订阅的click事件.使用提交表单时也不会触发验证submit().这就是如何定义该功能.因为您在回调中调用该函数,所以不会触发验证.但是,即使您没有submit()在回调中调用该函数,似乎reCAPTCHA 也会将事件从其默认行为中停止,从而完全停止验证.

在reCAPTCHA完成后提交表单

如果您想在reCAPTCHA完成后提交表单,您可以检查结果grecaptcha.getResponse().

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="myForm">
    Name: (required) <input id="field" name="field" required>
    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="your_site_key"
         data-callback="onCompleted"
         data-size="invisible"></div>
    <input type="submit" value="submit" />
</form>
<script>
    $('#myForm').submit(function(event) {
        console.log('form submitted.');

        if (!grecaptcha.getResponse()) {
            console.log('captcha not yet completed.');

            event.preventDefault(); //prevent form submit
            grecaptcha.execute();
        } else {
            console.log('form really submitted.');
        }
    });

    onCompleted = function() {
        console.log('captcha completed.');
        $('#myForm').submit();
        alert('wait to check for "captcha completed" in the console.');
    }
</script>

Answer 2

maechler 的答案非常好，但是，如果不想使用 jQuery，您可以使用 iife 添加事件侦听器

(function() {
    document.getElementById("my-form").addEventListener("submit", function(event) {
        console.log('form submitted.');
        if (!grecaptcha.getResponse()) {
            console.log('captcha not yet completed.');

            event.preventDefault(); //prevent form submit
            grecaptcha.execute();
        } else {
            console.log('form really submitted.');
        }
      });
  })();

我希望这有帮助。