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，则可以为事件监听器添加一个ife

(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.');
        }
      });
  })();

我希望有帮助。

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

2 个答案: