根据需要设置 reCaptcha 字段

Question

我使用带有 the jQuery Validate 插件的新 reCaptcha。验证插件适用于我的表单，但不幸的是它不适用于 reCaptcha。我试图让它在下面工作：

HTML:

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

Javascript:

 recaptcha: {
    required: true
      }    

但是没有用。有谁知道如何解决这一问题。我只需要默认的 This field is required 错误消息。

Answer 1

您的代码：

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

与...

recaptcha: {
    required: true
} 

您无法验证 <div>。期间。

jQuery 验证插件只能 验证<input>、<textarea> 和<select> 个元素也在 <form></form> 容器中。

唯一的解决方法是将您的值复制到 type="hidden" input 元素中，然后对其应用验证。

Answer 2

所以我设法让它起作用了。唯一的问题是在用户完成 reCaptcha 后，消息 This field is required 不会很快消失。我正在使用 blur、keydown 和 focusout 来检测用户输入并删除错误消息。

JS:

$("#myForm").bind('blur keydown focusout', function(){ 

        var dataArray = $("#myForm").serializeArray(),
        dataObj = {};
        console.dir(dataArray); //require firebug
        //console.log(dataArray);

        $(dataArray).each(function(i, field){
          dataObj[field.name] = field.value;
        });

        var recaptcha = (dataObj['g-recaptcha-response']);

        if(recaptcha != "") {
                $( "#temp" ).remove();
        }       
    });

    $( ".register" ).click(function() {

        var dataArray = $("#myForm").serializeArray(),
            dataObj = {};
            console.dir(dataArray); //require firebug
            //console.log(dataArray);

        $(dataArray).each(function(i, field){
          dataObj[field.name] = field.value;
        });

        var recaptcha = (dataObj['g-recaptcha-response']);

        $( "#temp" ).remove();

            if(recaptcha == "") {
                $("#recaptcha").append('<label id="temp" style="color:red;line-height:normal;font-size: small;">This field is required.</label>');
            }

    });             

});

HTML:

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

Answer 3

您应该为 reCaptcha 添加隐藏输入，因为 jQuery 验证只能验证 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");

就这些了。

Answer 4

希望您使用的是 HTML5 表单标签。

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

最后直接用required