使用jquery验证和谷歌v2验证码

时间:2015-07-27 15:14:55

标签: jquery jquery-validate recaptcha

我有一个使用jQuery验证并使用jQuery.form提交的表单,我想添加Google的v2验证码,我已经按照这个示例here,但它没有验证。我完成了验证码,但在提交时仍然会收到“此字段为必填项”消息。

这是验证码:

<script type="text/javascript">

jQuery(document).ready(function() {

    $j('.service-request-form').each(function() {
        $j(this).validate({
            errorPlacement: function(error, element) {
                $j(element).before(error);
            },
            errorElement: "span",
            ignore: [],
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                }
            },
            "hiddenRecaptcha": {
                required: function() {
                    if(grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email"
            },
            submitHandler: function(form) {
                $j(form).ajaxSubmit({
                    success: function(responseText, statusText, xhr, $form) {
                        $j('#service-request').dialog('close');
                        $j('#thank-you').dialog('open');
                    }
                });
                return false;
            }
        });
    });
});

这里是将验证码添加到表单的html部分:

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="site-key"></div>

1 个答案:

答案 0 :(得分:1)

我想出了问题所在:我将hiddenRecaptcha置于rules之外。只需将其放入其中即可:

<script type="text/javascript">

jQuery(document).ready(function() {

    $j('.service-request-form').each(function() {
        $j(this).validate({
            errorPlacement: function(error, element) {
                $j(element).before(error);
            },
            errorElement: "span",
            ignore: [],
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                },
                "hiddenRecaptcha": {
                    required: function() {
                        if(grecaptcha.getResponse() == '') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email"
            },
            submitHandler: function(form) {
                $j(form).ajaxSubmit({
                    success: function(responseText, statusText, xhr, $form) {
                        $j('#service-request').dialog('close');
                        $j('#thank-you').dialog('open');
                    }
                });
                return false;
            }

        });
    });
});