验证 Recaptcha 后禁用提交

Posted 2023-03-04

【中文标题】验证 Recaptcha 后禁用提交

【英文标题】：Disable submit once Recaptcha is verified

【发布时间】：2018-03-14 15:52:30

【问题描述】：

我有一个启用了 Recaptcha 的表单。如果用户未验证 Recaptcha 并点击提交，则会通过错误消息提示他/她进行验证。然后他们进行验证，但提交按钮仍然处于禁用状态，并且无法提交表单。在没有刷新表单的情况下验证 Recapthca 后，如何删除 disabled 属性。

到目前为止我的代码：

   $(".elq-form").validate(

  submitHandler: function (form) 
  var captcha = grecaptcha.render('evbox-recaptcha', 'sitekey' : 
  'my_key');
   var response = grecaptcha.getResponse(captcha);

    //recaptcha failed validation
    if (response.length === 0) 
      grecaptcha.reset(captcha);
      $('#recaptcha-error').show();
      return false;
    


    //recaptcha passed validation
    else 
      $('#recaptcha-error').hide();
      $('#submit').attr("disabled",false);
      return true;
    
  
);


<p class="field-p">
                  <div id="recaptcha-error" style="display: none">
                    <p>[[%site.text.recaptcha? &topic=`default` &namespace=`site`]]</p>
                  </div>
                  <div id="evbox-recaptcha" class="g-recaptcha" data-sitekey="my_key"></div>
                  <input id="submit" name="submit" type="submit" value="[[%site.button.submit? &topic=`default` &namespace=`site`]]" class="submit-button button button__primary" />
                </p>

【参考方案1】：

我认为您应该检查以下内容：

var captcha = grecaptcha.render('evbox-recaptcha', 'sitekey' : 'my_key');
var response = grecaptcha.getResponse(captcha);

//recaptcha failed validation
if (response.length === 0) 
  grecaptcha.reset(captcha);
  $('#recaptcha-error').show();
  return false;

参考：reCAPTCHA V2 | Google developers

【讨论】：

不，没有区别

还是不行。我必须刷新页面并重新填写表格。不是很好的用户体验:(

还有其他想法吗？

尝试输入您的验证码。例如。 var captcha = grecaptcha.render('example1', 'sitekey' : 'your_site_key'); 然后使用grecaptcha.reset(captcha)

我会用什么代替 example1？

【参考方案2】：

你试过用“attr”代替“prop”吗？

$('#submit').attr("disabled",false);

参考：.prop() vs .attr()

【讨论】：

感谢坚果没有变化。禁用仍然存在