How to use Google Invisible Recaptcha inside jQuery?

Question

How to use Invisible recaptcha inside jQuery?

This is recaptcha client side example: https://developers.google.com/recaptcha/docs/invisible#render_param

but all examples are in JavaScript, not jQuery.

I tried many times like below:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
  jQuery(function(){
    $(document).on("click", "#submit", function(){
      $("#demo-form").submit();
    });
  });

  function onSubmit(token) {
    document.getElementById("res").value = token;
  }

  var onloadCallback = function() {
    grecaptcha.render('check', {
    'sitekey' : 'site key',
    'callback' : onSubmit
    });

    document.getElementById("check").click();
  };
</script>

<form id='demo-form' action="test" method="POST">
 <input type="text" id="res" value="" required/>
  <button id="check" style="display:none;">Submit</button>
 <button id="submit" type="button">go</button>
</form>

However, the code above does not work: required attribute and jQuery's $("#demo-form").submit();

Other variants of the code were not successful either.

How can I use Google invisible recaptcha inside jQuery, and a working required attribute?

sorry, my question was written by translating it into a Google Translator. that link's document is only in JavaScript. but i want to use recaptcha inside jquery. — gdk, Feb 08 '18 at 17:08
first problem input tag's 'required' attribute not working. second, i can't do additional form validation with jquery. — gdk, Feb 08 '18 at 17:13

gdk · Answer 1 · 2018-02-09T07:28:57.437

oh i Solved it.

My mistake is that the submit button's id value is 'submit'. So '$("#demo-form").submit();' did not work.

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
    /*
    if i want jquery validate
    jQuery(function($){
        $("#submitBtn").click(function(){
            $(".must").each(function(){
                if(!$(this).val().trim()){
                    if($(this).prop("taName") == "SELECT"){
                        alert($(this).attr("title")+" select!");
                        $(this).focus();
                        mustFieldCheckFlag = false;
                        return false;
                    }else{
                        alert($(this).attr("title")+" write!");
                        $(this).focus();
                        mustFieldCheckFlag = false;
                        return false;
                    }
                }
            });

            $("form").submit();
        });
    });
    */
    var onloadCallback = function() {
      grecaptcha.render('check', {
      'sitekey' : 'site key',
      'callback' : (function(){})()
     });

     document.getElementById("check").click();
    };
</script>

<form action="test" method="POST">
   <input type="text" name="id" class="must" value="" />
   <input type="password" name="pw" class="must" value="" />
   ....
      
   <button id="check" style="display:none;">recaptcha</button>
   <button type="submit">go</button>
</form>

I changed this and it was solved. Then the 'required attribute' also works.

but I don't know if my trick is correct. because it invokes the recaptcha value every time this page is loaded. once this is cumulative, i have to solve visible rechatcha question...

what do you think of this?

How to use Google Invisible Recaptcha inside jQuery?

1 Answers1