How can I make reCaptcha work with jQuery Validation plugin?

Question

I would like to prevent a user from submitting a form unless reCaptcha is checked.

The issue is that the validation error message displays but my form does not submit even when the reCaptcha is checked. I checked the console and I don't see anything out of the ordinary.

My html code is:

<form id="myform>

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>

 <!-- These are the fields I want ignored -->
  <input type="hidden" id="email" name="email" value="" class="ignore>

  <input type="hidden" id="one" class="ignore">

  <input id="template_id" name="template" class="ignore"  />

  <button class="button-large-red " id="submitB" type="submit">Submit</button>
  </form>

And My validation code is:

            var $form = $("#myform"),
            $successMsg = $(".alert");

            $form.validate({
             ignore: ".ignore",
              rules: {
                firstname: {
                  required: true,
                  minlength: 0,
                  letters: true
                },

              "hiddenRecaptcha": {
                   required: function() {
                       if(grecaptcha.getResponse() == '') {
                           return true;
                       } else {
                           return false;
                       }
                   }
              },

              messages: {
                firstname: "Please place your first name",
                lastname: "Please place your last name",

              },

score -2 · Answer 1 · answered Jan 17 '18 at 15:01

Google recaptha run in iframe, have textarea:
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea>

When check "I'm not a robot", this textarea value will be something like this:

03AMPJSYUDBQ2JpUn7VdJbLQKUdDjG01rmgK_u2mEeGeccdNPiQom-D15JEs9pJNjwycHN86H9J7-G54hjvI9TRBAslHwJHOx3hnE1dwjlivgWlFLgt79SamJPcKufW3DnDjmeVKMVCSPXiHvc60hHKfBzgdJdVVJnm8esXIUjLroAPrRl1HqDWuYWuMZBAWHWyjXpXerb30FCIEHHN2DPUmwHiRDTs6PqIGYC-6NFtE2xDk-25giypzTGojuaaP5V1RLJ8F0TMfSbkcBbNtcD_1CRd6icxCzIwZKXUlhtxQKDXLerxdER8lkiKXtBM2tdBarojcT2rkSdvxqIcrseonIe8GbB1fa7U-Ni1Nq2NtEm7fzgW9Kog9qjRGOu5SJWnMwAT3LWt6dUayoy642Gi9YXDaF-b_Lq1O8ADNvAnyaFW7xyMKwSSDM

Simple and stupid way, check this textarea value length.

 if(!!$('#g-recaptcha-response').val().length) {
   //do something
 }

But there are better way, more information you can geet in google's docs

Where would I put your condition statement? Do you have a code example? — Mariton, Jan 17 '18 at 15:42
@Mariton I assume it would go into a custom validator: https://jqueryvalidation.org/jQuery.validator.addMethod/ — , Jan 17 '18 at 16:45

How can I make reCaptcha work with jQuery Validation plugin?

1 Answers1