Question

更新2

看起来我在使用隐形reCAPTCHA注册的回调（onSubmit函数）中访问文档元素（包括表单）时遇到了问题。更新了以下代码。

在浏览器控制台中，当JS到达＆＃34; document.getElementById（＆＃34; info_form＆＃34;）。时，我收到以下错误消息：submit（）＆＃34;打电话给JS：

10：26：47.556 TypeError：document.getElementById（...）。submit不是函数1 selector.php：13：9

启动时图像CAPTCHA正确解决，警告对话框正确显示。但是，我无法在回调中向我的后端明确提交表单。请注意，根据以下链接中的Google说明，我需要按照下面的说明调用preventDefault（）。如果我删除它，reCAPTCHA流将被中断。

更新

所以，它看起来像＆＃34; event.preventDefault（）;＆＃34;这是关键路线。如果我拥有它，则显示reCAPTCHA（即图像选择网格），并且我可以与小部件交互。但是，POST参数不会被发送。如果我注释掉preventDefault（），POST会正确进行 - 但是reCAPTCHA流程没有启动。这意味着，当其他POST参数被发送时，重要的reCAPTCHA数据不会被发送，因为根本不执行该流程。

那么，我该怎么做呢？看起来我需要拨打＆＃34; preventDefault＆＃34;之前＆＃34; grecaptcha.execute（）＆＃34;启用reCAPTCHA流程（Google也在其代码段中显示）。但这样做会以某种方式弄乱POST数据。我也明确地调用＆＃34; document.getElementById（＆＃34; info_form＆＃34;）。submit（）＆＃34;，但没有帮助。任何想法都会很棒。 THX！

此外，谷歌的隐形reCAPTCHA是一个相对较新的构造，仍处于测试阶段。可能是一些核心问题：那。我们经常习惯的是他们常规的reCAPTCHA，我们看到＆＃34;我不是机器人＆＃34;复选框。不可见的reCAPTCHA没有第一行的UI小部件 - 只有在你需要的时候才会让你成像CAPTCHA。

原始帖子

我需要你的帮助来弄清楚为什么我的1）按钮onclick =验证功能和2）我的表格POST不能共存。

具体来说，如果我注释掉＆＃34; document.getElementById（＆＃39; submit＆＃39;）。onclick = validate＆＃34;下面，我的表格POST顺利通过。但是，如果我注册验证功能，表单POST不起作用。谷歌告诉我（下面提供的谷歌链接），如果我想在执行隐形reCAPTCHA之前验证输入，我需要调用＆＃34; grecaptcha.execute（）;＆＃34;在按钮onclick事件期间。

所以，我的一般问题是，在执行（或在）按钮onclick = validate函数之后，我如何确保通过POST正常提交info_form，这样我就可以在我的后端PHP？不一定是POST＆＃34;本身＆＃34;没有工作 - 但是通过POST提交的参数可能会以某种方式搞砸 - 只是一个想法。

下面的源代码和进一步的代码特定注释。此外，请注意我已经在Google链接中使用了另外两种形式的reCAPTCHA绑定。＆＃34; grecaptcha.execute（）＆＃34;变种是唯一一个我遇到麻烦的人。

<?php
   include 'msg_recaptcha.php'; // use the debugMessage output
?>

<html>
<head>

<script>

function onSubmit(callbackInput) 
{
    var message = "g-recaptcha-response token successfully received.\n";
    message += "Token = ";
    message +=  callbackInput;
    alert(message);

    document.getElementById("info_form").submit();    
}

function validate(event) {
   event.preventDefault();
   if (!document.getElementById('firstname').value) {
     alert("Please enter name");
   } else {
      grecaptcha.execute();
   }
}
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>
 <form id='info_form' action="invisible_recaptcha_form.php" method="post">
 First name: <input id="firstname" name="firstname">
 Second name: <input id="secondname" name="secondname">

 <div id='recaptcha' class="g-recaptcha"
      data-sitekey="<Site key (public) from Google>"
      data-callback="onSubmit"
      data-size="invisible">
 </div>
 <button id='submit'>submit</button>

如果我注释掉＆＃34; onclick = validate＆＃34;在下面的行中，我的服务器PHP将通过POST接收表单详细信息 - 包括名字。但是，我无法在最终解决方案中对其进行评论，因为我需要运行recaptcha＆＃34;执行＆＃34;根据Google的说明https://developers.google.com/recaptcha/docs/invisible在validate（）函数中运行。 Google的说明问题在于，他们没有显示如何执行POST以及他们的grecaptcha.execute（）要求 - 我需要同时确保来自reCAPTCHA操作的有效负载被发送到POST到我的后端，以便我的后端可以与Google服务器通话以验证reCAPTCHA有效负载。

<script>
    document.getElementById('submit').onclick = validate;
</script>

<div id="debugmessage"><?=$debugMessage?> </div>

谢谢大家！

Answer 1

您必须更改 onSubmit JS函数，以便在重新验证后执行表单提交。

function onSubmit(token) {
   alert('thanks ' + document.getElementById('firstname').value);
   document.getElementById("info_form").submit();
}

<强>更新

当您在onsubmit eventHandler上调用event.preventDefault()时，您说浏览器默认情况下不执行表单提交，并且您将在需要时执行此操作。

Answer 2

我可以看到你接受参数进入验证功能

function validate(event) {
   event.preventDefault();
   if (!document.getElementById('firstname').value) {
 alert("Please enter name");
   } else {
  grecaptcha.execute();
   }

但您没有传递任何参数来验证

document.getElementById('submit').onclick = validate

这就是它给你错误的原因。

修改你的验证函数不带参数。我在想你为什么不在任何地方使用验证函数时需要参数？

在preventDefault（）之后，POST数据未正确发送 - 新的Google隐藏的reCAPTCHA相关

2 个答案: