表单提交需要谷歌验证码答案

【问题标题】：Google recaptcha required for form submission表单提交需要谷歌验证码
【发布时间】：2017-04-27 23:00:09
【问题描述】：

我需要帮助来验证我们要通过 google recaptcha 提交的表单，我已经成功实现了代码但是表单仍然允许在没有 recaptcha 的情况下提交，我如何使它成为必填字段？这里的java脚本不是很好，非常感谢任何帮助另外，如果会弹出一条错误消息，要求人们完成重新验证，那就太好了，非常感谢

CSS

<script src='https://www.google.com/recaptcha/api.js'></script>

HTML

<div class="form">

%form_errors%

<div align="right"><p><strong>* Denotes mandatory field</strong></p></div>


<fieldset>

<legend>Your enquiry details</legend>

<div class="form-row">
%question_label_746942_q7%
%question_field_746942_q7%
</div>

</fieldset>

<div class="g-recaptcha" data-sitekey="google site key"></div>
<div class="form-row-submit" align="right">

%submit_button%
</div>

</div>

【问题讨论】：

标签： javascript recaptcha

【解决方案1】：

默认情况下，您可以将提交按钮设置为禁用，并且仅在来自 reCAPTCHA 的回调函数中启用它。

检查这个：https://developers.google.com/recaptcha/docs/display

确保也在服务器端验证表单。

更新

将其添加到您的：

<script>
    function enableBtn(){
        document.getElementById("submit_details").disabled = false;
    }
</script>

然后在你的表单中调用reCAPTCHA div中的上述函数，如下：

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="enableBtn"></div>
<button type="submit" id="submit_details" disabled>Send</button>

这将在页面加载时禁用提交按钮，因此用户将无法提交表单。该按钮只有在用户通过“我不是机器人”测试后才会启用。

再次提醒，请记住在服务器端验证表单数据。

【讨论】：

谢谢，需要一些细节，因为java脚本不太好，我可以请我详细说明如何操作吗？
感谢 Muhammad，我尝试使用您的代码，但是即使勾选了 recaptcha，发送按钮仍然被禁用，我也想使用我自己的平台提交按钮和我创建的样式，如何我要这样做吗
验证过期时按钮仍然可点击怎么办，当验证过期时我将如何撤销点击按钮的能力？
@Third_Hyperion 还有一个 data-expired-callback 可以设置（如 data-callback）再次禁用按钮。（我意识到 3 年后你可能不在乎，但为了谷歌的利益）
出色的答案。为我工作

【解决方案2】：

<form action="" method="post" onsubmit="return validateRecaptcha();">
</form>

<script>
function validateRecaptcha() {
    var response = grecaptcha.getResponse();
    if (response.length === 0) {
        alert("You need to fill the captcha");
        return false;
    } else {
        alert("validated");
        return true;
    }
}

【讨论】：

【解决方案3】：

应该是<button type="submit" id="submit_details" disabled>Send</button>

不是if="submit_details"

该函数正在使用getElementById("submit_details")，因此它正在寻找“submit_details”的ID，以便通过设置disabled = false而不是disabled = true来删除按钮的禁用条件，这是设置的默认条件内联在<button> 标记中。

【讨论】：