Question

我需要帮助才能验证我们的表单是否会通过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>

Answer 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" if="submit_details" disabled>Send</button>

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

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

Answer 2

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

不是if="submit_details"

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

Answer 3

<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;
    }
}

表格提交需要Google recaptcha

3 个答案: