using jquery validate and Google v2 captcha

Question

I have a form that's validated using jQuery validate and submitted using jQuery.form, and I want to add Google's v2 captcha, I have followed this example here, but it's not validating. I complete the captcha but still get a "this field is required" message when submitting.

Here's the validation code:

<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;
            }
        });
    });
});

and here's the html part that adds the captcha to the form:

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

Try this answer to validate your recaptcha. It's vanillaJS, so you will have to integrate into your plugin. http://stackoverflow.com/questions/29612879/google-recaptcha-how-to-make-required/29613089#29613089 — colecmc, Jul 27 '15 at 22:13

score 1 · Answer 1 · answered Jul 28 '15 at 14:12

I figured what the problem was: I was placing the hiddenRecaptcha outside the rules. Simply placing it inside it did the trick:

<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;
            }

        });
    });
});

using jquery validate and Google v2 captcha

1 Answers1