Google Recaptcha 启用禁用的提交按钮
Posted
技术标签:
【中文标题】Google Recaptcha 启用禁用的提交按钮【英文标题】：Google Recaptcha enables disabled submit button 【发布时间】：2020-04-20 03:17:29 【问题描述】：我正在使用reCaptcha v2 invisible。我有一个带有disabled 提交按钮的简单表单。 Google reCAPTCHA 正在启用我的禁用按钮。
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="/action_page.php" id="referral-form">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
<input type="submit" id="form-submit-btn" disabled="disabled" class="g-recaptcha" data-callback='onSubmit' data-sitekey="***************" value="Submit">
</form>
function onSubmit()
if (grecaptcha.getResponse() !== "")
$('#referral-form').submit();
grecaptcha.reset();
当我删除 class="g-recaptcha" 时，该按钮被正确禁用。
【问题讨论】：
我认为 Recaptcha 启用了它，因为否则它无法提交。也许你应该在加载 Recaptcha 后进行回调并从那里禁用按钮并依赖于之后的其他输入。 有道理。举一个可行的例子作为答案，我会接受它。 【参考方案1】：正如我在上面的评论中所说，您可以在呈现 Invisible Recaptcha 时使用回调。
试试这个代码，让我知道它是否有效：
<!doctype html>
<html>
<head>
<script>
var onSubmit = function(token)
console.log(token);
// You can check token here and decide what to do
;
var onloadCallback = function()
grecaptcha.render('form-submit-btn',
'sitekey' : '***************',
'callback' : onSubmit
);
document.getElementById('form-submit-btn').disabled = true;
;
/////
// code to enable your button when you have content in the inputs
/////
</script>
</head>
<body>
<form action="/action_page.php" id="referral-form">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
<input type="submit" id="form-submit-btn" class="g-recaptcha" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</body>
</html>
我根据您的代码和 Google Recaptcha 文档中的 this example 建立了这个示例。
【讨论】：
嗯，你可以试试把document.getElementById('form-submit-btn').disabled = true;放在渲染线后面吗？
当用户单击提交按钮时，没有任何反应，我应该添加什么代码才能提交工作？
您的按钮似乎已被禁用，如果一切配置正确，您应该得到验证码。您可以针对特定案例创建问题或查找类似案例。
是的，我已经创建了一个问题，但没有好的答案。 ***.com/questions/64136658/…【参考方案2】：
为了解决这个问题，我已经升级到 reCaptcha v3，非常容易集成，现在我将提交从
【讨论】：
以上是关于Google Recaptcha 启用禁用的提交按钮的主要内容，如果未能解决你的问题，请参考以下文章
php 隐藏recaptcha iframe并禁用提交按钮，直到电子邮件字段为有效电子邮件。同样绝对定位以避免风格冲突。