仅在HTML5验证通过后才如何运行reCaptcha? [英] How to run reCaptcha ONLY if HTML5 validation has passed?

问题描述

通常，HTML5表单验证在submit事件之前 运行.

Usually, HTML5 form validation runs before the submit event.

有了这个

<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属性)时，才会触发该事件.

if the input field is empty, the submit event handler doesn't run. It will be triggered only if the HTML5 validation (the required attribute, in this case) has passed.

我希望验证码也可以在HTML5验证之后的 上运行；如果以后要警告他缺少验证码，我为什么还要烦扰编译验证码的用户? 首先我应该强迫用户以正确的方式做所有事情，然后然后确保它是人类而不是机器人，恕我直言.

I'd expect a captcha to run after the HTML5 validation too; why do I have to annoy the user compiling a captcha if later on I'd warn him there are missing fields ? First I should force the user to do everything in the right way, then ensure it's a human and not a bot, IMHO.

很明显，reCaptcha在其附加的表单上执行了某些操作，从而删除了HTML5验证功能.

Appearently, reCaptcha does something on the form it attaches on, removing the HTML5 validation feature.

例如，使用最新的看不见的验证码:

<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>

表单将以空白字段提交，而不会通知用户其义务.

The form will be submitted with the empty field, without notifying the user about its obligatoriness.

关于它为何如此行为的任何线索?有什么方法可以指示reCaptcha在控制之前让HTML5表单验证运行?

Any clue on why it acts like this ? Is there a way I can instruct reCaptcha to let HTML5 form validation run before taking control ?

推荐答案

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

Instead of attaching the reCAPTCHA attributes to the button directly you have to add them to a div and then use grecaptcha.execute(); on form submit.

<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仍会根据其默认行为停止该事件，从而完全停止验证.

When you add the reCAPTCHA attributes to the button as you did, Google simply adds a click listener to the button and executes the reCAPTCHA when the button is clicked. There is no submit listener added. The HTML5 validation is only triggered by a click on a submit button and runs before the submit event. That is why we must make sure that reCAPTCHA runs after the submit event. Apparently the click event, which reCAPTCHA subscribes to, is dealt with before the internal HTML5 validation would get triggered. The validation is also not triggered when you submit a form using submit(). That is just how that function got defined. Because you call the function in your callback, validation gets not triggered. However even if you did not call the submit() function in the callback it seems that reCAPTCHA stops the event from its default behaviour and thus stops validation completely.

reCAPTCHA完成后提交表单

如果要在reCAPTCHA完成后提交表单，可以检查grecaptcha.getResponse()的结果.

If you want to get the form submitted after the reCAPTCHA is completed, you can check for the result of 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>

这篇关于仅在HTML5验证通过后才如何运行reCaptcha?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！