Google Error INVISIBLE reCaptcha + jQuery validate ()

Question

I have successfully implemented the new Google INVISIBLE reCaptcha on several sites, however it conflicts with jQuery validate (), so that js validation is no longer executed when submitting a button / form, and reCaptcha instantly starts. If the user forgets to fill out the requried form field, he will have to wait for the server to respond and return to it next time.

jQuery.validate () supports the callback, but because it is hardcoded inside the CMS inner class, is there a way that I can somehow change it (for example, from the front-end theme, in the load document, when the confirmation code is already displayed)?

Or another idea would be to somehow delay the captcha callback so that the validation step could get a chance to run.

Thanks!

jQuery Form validation: (hard-coded in the kernel, cannot be changed if I do not edit the main file or extend the class / clone function - not optimal)

<script type="text/javascript"> $(document).ready(function(){ $("form[name=comment_form]").validate({ rules: { body: { required: true, minlength: 1 }, authorEmail: { required: true, email: true } }, wrapper: "li", errorLabelContainer: "#comment_error_list", invalidHandler: function(form, validator) { $('html,body').animate({ scrollTop: $('#comment_error_list').offset().top }, { duration: 250, easing: 'swing'}); }, submitHandler: function(form){ $('button[type=submit], input[type=submit]').attr('disabled', 'disabled'); form.submit(); } }); }); </script> 

reCaptcha explicit render:

 <script type='text/javascript'> var renderInvisibleReCaptcha = function() { for (var i = 0; i < document.forms.length; ++i) { var form = document.forms[i]; var holder = form.querySelector('.invisible-recaptcha'); if (null === holder) continue; (function(frm){ var holderId = grecaptcha.render(holder, { 'sitekey': 'my-key-here', 'badge': 'inline', 'size': 'invisible', 'callback': function (recaptchaToken) {HTMLFormElement.prototype.submit.call(frm);}, 'expired-callback': function(){grecaptcha.reset(holderId);} }); frm.onsubmit = function (evt){evt.preventDefault();grecaptcha.execute(holderId);}; })(form); } }; </script> 

Answer 1

I had a similar problem and the form was checked before invisible reCaptcha was executed using this provided by Terry.

Here are the steps:

Add this div before submit button in your form

  <div id='recaptcha' class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"></div> 

Update your key. After closing the form, add this method

 <script>onload();</script> 

Add this code in front of your form.

 <script> function validate(event) { event.preventDefault(); if (!document.getElementById('field').value) { alert("You must add text to the required field"); } else { grecaptcha.execute(); } } function onload() { var element = document.getElementById('submit'); element.onclick = validate; } </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> 

Complete all validations in the validate method and, if all validations succeed, issue the captcha command.

Answer 2

I had the same issue that worked on the classic Asp.Net Core MVC pattern. It was internally adorned with unobtrusive validation. After inserting Invisible recaptcha, the check was broken. After reading this article, I was able to get it to work using integrated verification, without the need to specify validation for each field (output by the model class to the MVC project)

HTML page:

  <input type="hidden" name="gRecaptchaResponse" id="gRecaptchaResponse" value="" /> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div id='recaptcha' class="g-recaptcha" data-sitekey="@_configuration["InvisibleRecaptcha:SiteKey"]" data-callback="SubmitRegistration" data-size="invisible"></div> <button type="submit" id="SubmitButton" class="btn btn-primary"> Invia</button> </div> </div> 

Javascript Code:

  <script> function onload() { var element = document.getElementById('SubmitButton'); element.onclick = validate; } onload(); function validate(event) { event.preventDefault(); $("#Form").validate(); var isFormValid = $("#Form").valid(); if (isFormValid) { grecaptcha.execute(); } } function SubmitRegistration(data) { if ($("#gRecaptchaResponse").val() == '') { $("#gRecaptchaResponse").val(data); } document.getElementById("Form").submit(); } </script> 

Hope this piece of code can help someone