仅在 HTML5 验证通过后如何运行 reCaptcha？答案

【问题标题】：How to run reCaptcha ONLY if HTML5 validation has passed?仅在 HTML5 验证通过后如何运行 reCaptcha？
【发布时间】：2017-05-17 09:51:55
【问题描述】：

通常，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 表单验证运行？

【问题讨论】：

标签： javascript html validation recaptcha

【解决方案1】：

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

<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 在提交事件之后运行。显然，reCAPTCHA 订阅的 click 事件是在触发内部 HTML5 验证之前处理的。当您使用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>

【讨论】：

非常简洁的答案！仍然不知道为什么将事件附加到 onClick 处理程序会影响 onSubmit 处理程序杀死其内置的验证功能，但这是一个小问题：我的需求非常复杂（这只是难题的第一部分），他们现在正在全力以赴。谢谢！
我编辑了答案，以对您在帖子中提出的那部分问题做出更多回应。不客气！
感谢您的澄清，非常感谢！谨防未达到 20 次编辑（您已达到 11 次），否则该帖子将在社区 Wiki 中转换，您将失去获得的声誉:)
这是一个了不起的答案，但很难找到。
完美的解决方案，你拯救了我的夜晚！

【解决方案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.');
        }
      });
  })();

希望对你有帮助。

【讨论】：