根据需要设置reCaptcha字段

Question

我使用新的reCaptcha和jQuery Validate插件.验证插件适用于我的表单但不幸的是它不适用于reCaptcha.我试图让它在下面工作:

HTML:

<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXX"></div> 

使用Javascript:

 recaptcha: {
    required: true
      }    

但它没有奏效.有谁知道如何解决这一问题.我只需要默认的这个字段是必需的错误信息.

Answer 1

你应该为reCaptcha添加隐藏的输入,因为jQuery Validation只能验证input/textarea/select:

<div class="g-recaptcha" data-sitekey="XXXXX"></div>
<input type="hidden" name="recaptcha" data-rule-recaptcha="true">
<!-- 
     We set "data-rule-recaptcha" — this will require jQuery Validate
     to validate this field using method named "recaptcha"
     (which we write below) 
-->

然后像这样重写你的JS:

// By default jQuery Validation ignore hidden inputs, 
// so we change settings to ignore inputs with class "no-validation". 
// Cause our hidden input didn't have this class — it would be validated!
$('form').validate({
  ignore: '.no-validation'
});     

// Add our validation method for reCaptcha: 
$.validator.addMethod("recaptcha", function(value, element) {
  var grecaptcha = window.grecaptcha || null;
  return !grecaptcha || grecaptcha.getResponse();
}, "Please fill reCAPTCHA");

就这样.