Установите поле reCaptcha по мере необходимости

Вы должны добавить скрытый ввод для reCaptcha, потому что проверка jQuery может проверять только ввод/текстовое поле/выбор:

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

Это все.

Так что мне удалось заставить его работать. Единственная проблема заключается в том, что после заполнения пользователем reCaptcha сообщение Это поле обязательно для заполнения не исчезает быстро. Я использую размытие, нажатие клавиши и фокусировку, чтобы обнаружить ввод пользователя и удалить сообщение об ошибке.

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>   

Ваш код:

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

с...

recaptcha: {
    required: true
} 

Вы не можете проверить <div>. Период.

Подключаемый модуль jQuery Validate может только проверять элементы <input>, <textarea> и <select>, которые также находятся в контейнере <form></form>.

Единственным обходным решением было бы скопировать ваше значение в элемент type="hidden" input, а затем применить к нему проверку.

надеясь, что вы используете тег формы HTML5.

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

просто используйте required в конце