CODEWITHSUNDEEP
javascriptformsvalidationrecaptchainvisible-recaptcha
Laurent
Laurent

Reputation: 53

Invisble ReCaptcha: preventing image challenge before submiting form

I've added Google invisible recaptcha to an Ajax (Javascript / PHP) form on a web page (see html + js on client side below). Everything works fine except that too often Google invisible Recaptcha launches the image challenge at webpage load and at form submission.

This is very annoying because the page including this submission form is the homepage of the website (in fact it's a petition signing website for an association).

Which leads to the problem that the user can see image challenge even before getting main information from the website and deciding to sign or not the petition. This is a bad user experience.

Is there a way to prevent this behavior. Configuring Google Recaptcha in such a way that It's not challenging before the user clicks on the submit button?

Thanks a lot for your precious help :o)!

Laurent

Javascript code:

    window.onScriptLoad = function () {

        var htmlEl = document.querySelector('.g-recaptcha');

        var captchaOptions = {

          'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
          'size': 'invisible',
          'badge': 'inline',
          callback: window.onUserVerified

         };

        var inheritFromDataAttr = true;

        recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

        console.log('recaptchaId=', recaptchaId);

        window.grecaptcha.execute(recaptchaId);

    };

    window.onUserVerified = function (token) {

        console.log('token=', token);

    };


    function onSubmitBtnClick () {

      var token = window.grecaptcha.getResponse(recaptchaId);

      console.log('token=', token);

      if (!token) {

         window.grecaptcha.execute(recaptchaId);
         return;

      }


      $.ajax({

            url: 'process.php',
            type: 'post',
            dataType: 'json',
            data : {

                'lastname'   : $("#lastnameField").val(),
                'firstname'  : $("#firstnameField").val(),
                'city'       : $("#cityField").val(),
                'postalCode' : $("#postalcodeField").val(),
                'g-recaptcha-response' : token

            },

            success:function(data) {

                // informs user that form has been submitted
                // and processed

                },

            error: function(xhr, textStatus, error){

                  console.log(xhr.statusText);
                  console.log(textStatus);
                  console.log(error);
            }

       });

HTML code:

<html>

  <head>

    <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>    

    <script type="text/javascript" src="js/petition.js"></script>

    ...

  </head>

  <body>

     <form id="petitionForm" onsubmit="return false;">

         <input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
         <input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
         <input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
         <input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
         ....

         <input type="submit" name="login" class="g-2" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx" id="signButton" data-callback='' value="Signer" onclick="onSubmitBtnClick();">

         <div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>

       </form>

       ...

  </body>
</html>

Upvotes: 1

Views: 1189

Answers (1)

Giacomo Scarpino
Giacomo Scarpino

Reputation: 647

For me in onScriptLoad function you must remove 

window.grecaptcha.execute(recaptchaId);

I guess this execute recaptcha onload

Upvotes: 1

Related Questions