javascript - Google Recaptcha 启用禁用的提交按钮
问题描述
我正在使用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"
按钮被正确禁用。
解决方案
正如我在上面的评论中所说,您可以在呈现 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 文档中的这个示例来构建这个示例。
推荐阅读
- r - pivot_longer 错误:无法组合不同的类?
- angular - 如果它的值通过某个条件,如何“readOnly = true”一个json模式字段?
- java - 根据布尔标志在 Hibernate 中加载子实体
- javascript - 'Express.js 异步处理程序' - 难以为其编写测试
- python - FMUException: 无法在指定目录中找到 FMU
- python - 使用布尔掩码创建一个新的数据框
- set - 在厨师中从策略组中删除一个节点
- javascript - 如何使用 Javascript Selenium C# 更改元素的值
- azure - 备份 Azure 配置
- android - 稍后在 ViewModel 中初始化 LiveData