Jak uruchomić RECaptcha TYLKO po przejściu sprawdzania poprawności HTML5?

Question

Zazwyczaj sprawdzanie poprawności formularza HTML5 uruchamia przed zdarzenie submit.

Dzięki tej

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

jeśli pole wejściowe jest pusty, złożyć obsługi zdarzenia nie działa. Zostanie wyzwolony tylko wtedy, gdy minęło sprawdzanie poprawności HTML5 (w tym przypadku atrybut required).

Spodziewałbym się, że captcha uruchomi także po również walidację HTML5; dlaczego muszę denerwować użytkownika, który kompiluje captcha, jeśli później ostrzec go, że brakuje pól? Najpierw Powinienem zmusić użytkownika do zrobienia wszystkiego we właściwy sposób, następnie upewnić się, że to człowiek, a nie bot, IMHO.

Wygląda na to, że reCaptcha robi coś w formularzu, na którym się znajduje, usuwając funkcję sprawdzania poprawności HTML5.

Na przykład, przy użyciu najnowszej 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> 

Formularz zostanie przedstawiony z pustym polu, bez powiadamiania użytkownika o jego obligatoriness.

Każda wskazówka, dlaczego tak działa? Czy istnieje sposób, w jaki mogę polecić reCaptcha, aby umożliwić walidację formularza HTML5 przed przejęciem kontroli?

Answer 1

Zamiast dołączać atrybuty reCAPTCHA do przycisku bezpośrednio, należy dodać je do elementu div, a następnie użyć grecaptcha.execute(); w formularzu przesłania.

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

Po dodaniu reCAPTCHA atrybuty przycisku jak ty, Google po prostu dodaje kliknij słuchacza do przycisku i wykonuje reCAPTCHA po kliknięciu przycisku. Nie dodano żadnego odbiornika przesyłania. Sprawdzanie poprawności HTML5 jest wyzwalane tylko przez kliknięcie przycisku przesyłania i uruchamia przed zdarzeniem przesyłania. Dlatego musimy upewnić się, że reCAPTCHA uruchamia po zdarzenie submit. Najwyraźniej zdarzenie click, do którego subskrybuje reCAPTCHA, jest przetwarzane przed uruchomieniem wewnętrznego sprawdzania poprawności HTML5. Sprawdzanie poprawności nie jest również wyzwalane po przesłaniu formularza za pomocą submit(). Tak właśnie zdefiniowano tę funkcję. Ponieważ wywołujesz funkcję w twoim oddzwanianiu, sprawdzanie poprawności nie zostaje uruchomione. Jednak nawet jeśli nie zadzwoniłeś do funkcji submit() w wywołaniu zwrotnym, wygląda na to, że reCAPTCHA zatrzymuje to zdarzenie z domyślnego zachowania i całkowicie zatrzymuje walidację.

Prześlij formularz po reCAPTCHA zakończeniu

Jeśli chcesz otrzymać formularz złożony po reCAPTCHA jest zakończona, można sprawdzić na skutek 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>