New reCaptcha with jQuery Validation Plugin

Question

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

My intent:

Answer 1

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:

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)

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

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

And then in your js file add

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