title: New reCaptcha with jQuery Validation Plugin
body: <p>I searched and can't figure out how to <a href="https://developers.google.com/recaptcha/docs/verify" rel="noreferrer">validate the new reCaptcha</a>,  before form submit, along with the validate function of <a href="http://jqueryvalidation.org/" rel="noreferrer">jQuery validation Plugin</a>.</p>
  
  <p>My intent:</p>
  
  <pre><code>    $.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);
                              }
                          });
                      }
  
  
          });
  </code></pre>
  
  <p>In a few words: I would like to check server-side, with the <a href="http://jqueryvalidation.org/remote-method/" rel="noreferrer">remote method</a>, if the user has passed the recaptcha validation BEFORE submitting the form, along with other rules of validation.</p>
  
  <p>I'm able to check the recaptcha <em>AFTER</em> submission (on sendmail.php), but it would be nicer to have the recaptcha validation response along with other fields validation.</p>
  
  <p>The main reason is for a better user experience, having all fields checked at once.</p>
  
  <p>I've managed to achieve this, moving the check inside the submitHandler:</p>
  
  <pre><code>            submitHandler : function () {
                    if (grecaptcha.getResponse() == ''){
                        // if error I post a message in a div
                        $( '#reCaptchaError' ).html( '&lt;p&gt;Please verify youare human&lt;/p&gt;' );
  
                    } else {
  
                          $.ajax({
                              type : "POST",
                              url : "sendmail.php",
                              data : $('#form').serialize(),
                              success : function (data) {
                                  $('#message').html(data);
                              }
                          });
                      }
  
               }
  </code></pre>
  
  <p>But I don't like this approach, for 2 reasons:</p>
  
  <ol>
  <li>It is just checking if the recaptcha has been filled, not if it's valid, and</li>
  <li>User feels like it is a 2 step verification.</li>
  </ol>
  
  <p><a href="https://stackoverflow.com/a/28044629/391929">In this answer</a> they say it can be done rendering the Recaptcha on a callback, to specify a function call on a successful CAPTCHA response.</p>
  
  <p>I tried to implement that, but I've not been able to use this solution within a rule of the validate() function. </p>