如何在jQuery内使用Google Invisible Recaptcha

Question

如何在jQuery内使用不可见的recaptcha？

这是recaptcha客户端示例：https：//developers.google.com/recaptcha/docs/invisible#render_param

但所有示例都在JavaScript中，而不是jQuery。

我尝试了很多次，如下：

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

但是，上面的代码不起作用： required属性和jQuery的$("#demo-form").submit();

代码的其他变体也不成功。

我如何在jQuery内使用Google Invisible Recaptcha和一个工作的required属性？

Answer 1

哦，我解决了。

我的错误是提交按钮的ID值是"提交"。因此，'$("＃demo-form"(。submit((;'没有工作。

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

我更改了此问题，并解决了。然后"必需属性"也有效。

，但我不知道我的技巧是否正确。因为它每次加载此页面都会调用recaptcha值。一旦这是累积的，我就必须解决可见的rechatcha问题...

您如何看待这个？