表单提交需要Google recaptcha

Question

我需要帮助，以验证我们的表单通过谷歌recaptcha提交，我已经成功地实现了代码，但表单仍然允许提交没有recaptcha，我如何使它必填字段？不是很好的java脚本在这里，任何帮助也是非常感谢的，如果一个错误消息将弹出，要求人们完成recaptcha，这将是伟大的，谢谢。

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

默认情况下，可以将submit按钮设置为disabled，并且只能在reCAPTCHA的回调函数中启用它。

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

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

更新

将此内容添加到您的：

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

然后在表单中的reCAPTCHA目录中调用上面的函数，如下所示：

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

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

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

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

​

Answer 3

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

不是if="submit_details"

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