0

如何在 jQuery 中使用 Invisible 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 不可见的 recaptcha 和工作required属性？

4

1 回答 1

0

哦，我解决了。

我的错误是提交按钮的 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问题......

你觉得这怎么样？

于 2018-02-09T01:18:11.193 回答