如何使reCAPTCHA成为必填字段？

我正在使用GoogleRecaptcha，并且已经能够将CAPTCHA组件添加到表单中的我的页面中。但是当我提交表单时，没有进行验证来检查验证码是否已解决

---

提交表单时，如何验证验证码组件是否已解决？或者，换句话说，我如何使我的验证码组件成为必需的？

不确定您是否已经解决了这个问题，但您可以使用一个插件来验证Google recaptcha：

---

我遇到了与您相同的问题，并通过以下方式解决：

首先声明一个存储

1

或

0

的变量，具体取决于用户是否正确填写了capcha

var allowSubmit = false;

然后，您需要一个在用户正确填写reCapcha时执行的函数：

function capcha_filled () {
    allowSubmit = true;
}

。。。以及在reCapcha会话到期时执行的函数：

function capcha_expired () {
    allowSubmit = false;
}

要告诉reCapcha有关函数（回调）的信息，请在html中设置这些

data-

属性：

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

您还需要对表单提交进行回调：

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

最后在表单中添加

onsubmit

属性：

<form action="..." onsubmit="check_if_capcha_is_filled">

---

---

注意：如评论中所述，仍然需要服务器验证。代码可防止意外提交表单，除非已填写capcha，只是为了方便用户

我发现这是一种快速简便的方法。将此添加到您的标题中：

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

window.onload=函数（）{
var recaptcha=document.forms[“myForm”][“g-recaptcha-response”]；
recaptcha.required=true；
recaptcha.oninvalid=函数（e）{
//做点什么
警告（“请填写验证码”）；
}
}

这仅适用于HTML5，并且这些浏览器支持（或应该支持）：

---

（Chrome中的JS控制台显示此错误消息：，我还无法解决此问题。希望其他人能够改进此响应。）

如果您想使用本机html5弹出窗口，下面是解决方案

JavaScript:

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS:

---

我检查了是否存在#g-recaptcha-response：

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

---

这真的应该是文档的一部分…

我发现这非常有用：

<div class="g-recaptcha myPopover" data-sitekey="Your Key" 
        data-callback="recaptchaCallback">

还有一个函数，返回值在其他html标记中使用，如下所示：

<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
    return recaptchachecked;
}

函数isreCaptchaChecked（）
{
返回重新检查；
}

---

我希望这对您有所帮助。

如果您想要更友好、更具描述性的消息，可以添加所需的复选框。 这将确保html5弹出窗口显示如下内容：“如果要继续，请选中此框”

然后在css上隐藏复选框并将其放置到验证码框：

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}

---

抱歉，gpullen，但我想在表单中按必填字段重述一遍。请尝试此链接-。将您的代码与相关谷歌产品页面的链接一起发布，对每个人来说都比发布动画gif有用得多。谢谢。什么能阻止我进入javascript控制台，自己设置

submit=true

呢？@IanMacDonald绝对没什么。这（我的答案）只是为了方便用户。这样做的目的是防止他们在未填写capcha的情况下意外提交表单（例如，在表单上按enter键）。只是为了更好的用户体验而保存页面重新加载。哦，我现在明白你的意思了。我应该明确提到，仍然需要进行服务器检查。谢谢你的提醒。我喜欢这种方法，但出现了一个错误：“名为='g-recaptcha-response'的无效表单控件不可聚焦。”@timkado你有代码笔给我吗？@timkado工作正常：嗨，弗雷德-这很奇怪。我复制了您的代码，但仍然收到相同的错误：名为='g-recaptcha-response'的无效表单控件不可聚焦。它对我很有效。@timkado met发生了相同的错误，但在添加给定的CSS样式后被删除。这是因为默认情况下，目标文本区域具有“display:none；”。谢谢，弗雷德！工作得很好！

var recaptchachecked=false; 
function recaptchaCallback() {
    recaptchachecked = true;
}

<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
    return recaptchachecked;
}

<div class="captcha">
   <div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
   <input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>

window.removeFakeCaptcha = function() {
   document.querySelector('.captcha-fake-field').remove();
}

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}