Disable submit once Recaptcha is verified

Question

I have a form with Recaptcha enabled. If the user does NOT verify the Recaptcha and hits submit he/she is prompted to verify by an error message. Then they verify but the submit button remains disabled and the form cannot be submitted. How can I remove the disabled attribute once the Recapthca is verified without the form being refreshed.

My code so far:

   $(".elq-form").validate({

  submitHandler: function (form) {
  var captcha = grecaptcha.render('evbox-recaptcha', {'sitekey' : 
  'my_key'});
   var response = grecaptcha.getResponse(captcha);

    //recaptcha failed validation
    if (response.length === 0) {
      grecaptcha.reset(captcha);
      $('#recaptcha-error').show();
      return false;
    }


    //recaptcha passed validation
    else {
      $('#recaptcha-error').hide();
      $('#submit').attr("disabled",false);
      return true;
    }
  }
});


<p class="field-p">
                  <div id="recaptcha-error" style="display: none">
                    <p>[[%site.text.recaptcha? &topic=`default` &namespace=`site`]]</p>
                  </div>
                  <div id="evbox-recaptcha" class="g-recaptcha" data-sitekey="my_key"></div>
                  <input id="submit" name="submit" type="submit" value="[[%site.button.submit? &topic=`default` &namespace=`site`]]" class="submit-button button button__primary" />
                </p>

AboElnouR · Answer 1 · 2017-10-03T15:33:38.490

0

I think you should check the following:

var captcha = grecaptcha.render('evbox-recaptcha', {'sitekey' : 'my_key'});
var response = grecaptcha.getResponse(captcha);

//recaptcha failed validation
if (response.length === 0) {
  grecaptcha.reset(captcha);
  $('#recaptcha-error').show();
  return false;
}

reference: reCAPTCHA V2 | Google developers

edited Oct 03 '17 at 15:33

answered Oct 03 '17 at 12:46

AboElnouR

281
3
14

No, no difference – madameFerry Oct 03 '17 at 14:00
Still doesnt work . I have to refresh the page and refill the form in. Not a great user experience :( – madameFerry Oct 03 '17 at 14:37
Any other ideas? – madameFerry Oct 03 '17 at 14:38
try to strore your captcha. for Ex. `var captcha = grecaptcha.render('example1', {'sitekey' : 'your_site_key'});` then use `grecaptcha.reset(captcha)` – AboElnouR Oct 03 '17 at 14:44
what would i put in place of example1? – madameFerry Oct 03 '17 at 14:46
the id the html tag which will render the captcha – AboElnouR Oct 03 '17 at 14:50
Now i can submit without verifying recapthca. I have updated the code above. – madameFerry Oct 03 '17 at 14:54
remove the hash mark from the id `var captcha = grecaptcha.render('evbox-recaptcha', {'sitekey' : 'my_key'});` – AboElnouR Oct 03 '17 at 15:12
Also don't forget to change the value of response variable `var response = grecaptcha.getResponse(captcha);` – AboElnouR Oct 03 '17 at 15:29
Check the answer again now please. – AboElnouR Oct 03 '17 at 15:33
I have amended the code- but still can submit without recaptcha :( . my code is edited above – madameFerry Oct 03 '17 at 18:37
You have to exchange `var response` and `var captcha` lines – AboElnouR Oct 04 '17 at 12:07
Thanks for your patience, still same result though. Dont know what the isssue could be? Updated code above – madameFerry Oct 05 '17 at 09:44

Nikos M. · Answer 2 · 2017-10-03T12:52:10.673

0

have you tried "attr" instead of "prop"?

$('#submit').attr("disabled",false);

Ref: .prop() vs .attr()

edited Oct 03 '17 at 12:52

answered Oct 03 '17 at 12:46

Nikos M.

114
1
8

Thanks nut no change. Disabled persists – madameFerry Oct 03 '17 at 14:00

Disable submit once Recaptcha is verified

2 Answers2