如何在 jQuery 中使用 Google Invisible Recaptcha？答案

【问题标题】：How to use Google Invisible Recaptcha inside jQuery?如何在 jQuery 中使用 Google Invisible Recaptcha？
【发布时间】：2018-02-08 17:04:17
【问题描述】：

如何在 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 属性？

【问题讨论】：

jQuery 是 Javascript。
抱歉，我的问题是通过谷歌翻译器翻译的。该链接的文档仅在 JavaScript 中。但我想在 jquery 中使用 recaptcha。
但是您的问题/问题到底是什么？
第一个问题输入标签的“必需”属性不起作用。其次，我无法使用 jquery 进行额外的表单验证。

标签： jquery invisible-recaptcha

【解决方案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 问题......

你怎么看？

【讨论】：