使用jQuery Validation Plugin进行新的reCaptcha [英] New reCaptcha with jQuery Validation Plugin

问题描述

我搜索了很多，但我无法弄清楚如何验证新的reCaptcha ，在表单提交之前，以及 jQuery validation Plugin 的验证功能。

I searched a lot but I can't figure out how to validate the new reCaptcha, before form submit, along with the validate function of jQuery validation Plugin.

我的意思是这样的：

    $.validator.addMethod('reCaptchaMethod', function (value, element, param) {
            if (grecaptcha.getResponse() == ''){
                return false;
            } else {
                // I would like also to check server side if the recaptcha response is good
                return true
            }
        }, 'You must complete the antispam verification');


    $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                reCaptcha: {
                    reCaptchaMethod: true   
                }
            },
            messages: {
                name: "Please fill your name",
                email: "Please use a valid email address"
            },
            submitHandler : function () {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }


        });

简而言之，我想检查服务器端，使用远程方法，如果用户在提交表单之前已通过重新验证验证，以及其他验证规则。

In a few words, I would like to check serverside, with the remote method, if the user has passed the recaptcha validation BEFORE submitting the form, along with other rules of validation.

我能够检查提交后的recaptcha（在sendmail.php上），但更好的方法是将recaptcha验证响应与其他字段验证一起使用。

I'm able to check the recaptcha AFTER submission (on sendmail.php), but would be nicer to have the recaptcha validation response along with other fields validation.

主要原因是为了获得更好的用户体验，同时检查所有字段。

The main reason is for a better user experience, having all fields checked at once.

我已成功实现内部检查submitHandler：

I've managed to achieve something moving the check inside the submitHandler:

            submitHandler : function () {
                  if (grecaptcha.getResponse() == ''){
                      // if error I post a message in a div
                      $( '#reCaptchaError' ).html( '<p>Please verify youare human</p>' );

                  } else {

                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $('#form').serialize(),
                            success : function (data) {
                                $('#message').html(data);
                            }
                        });
                    }

             }

但我不喜欢2个理由：
1）我只是检查重新填写是否已经填写，而不是它是否有效。
2）用户感觉就像是两步验证。

But I don't like for 2 reasons: 1) I just check if the recaptcha has been filled, not if it's valid. 2) User feels like a 2 step verification.

In这个答案他们说可以在回调中渲染Recaptcha，在成功的CAPTCHA响应中指定函数调用。

In this answer they say it can be done rendering the Recaptcha on a callback, to specify a function call on a successful CAPTCHA response.

我试图实现，但我无法在validate（）函数的规则中使用此解决方案。

I tried to implement that, but I've not been able to use this solution within a rule of the validate() function.

欢迎任何提示！

推荐答案

我知道这个问题是有点过时，但我遇到了同样的问题，只是找到了解决方案。
你可以通过在reCaptcha div旁边添加一个隐藏字段来实现这一点，例如：

I know this question is a bit dated but I was having the same problem and just found the solution. You can do this by adding a hidden field next to the reCaptcha div, like:

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">

然后在你的javascript中：

then in your javascript:

$("#form").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },(...rest of your code)

注意您必须 忽略：.ignore在您的代码中，因为jquery.validate会忽略隐藏的字段默认，不验证它们。

NOTICE THAT YOU MUST HAVE the ignore: ".ignore" in your code because jquery.validate ignores hidden fields by default, not validating them.

如果你想t删除reCapcha验证时的错误消息将数据回调添加到reCapcha元素

If you want to remove the error message on reCapcha validate add a data-callback to the reCapcha element

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}" data-callback="recaptchaCallback"></div>

然后在你的js文件中添加

And then in your js file add

function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};

这篇关于使用jQuery Validation Plugin进行新的reCaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！