Implementé con éxito el nuevo reCaptcha INVISIBLE de Google en varios sitios, sin embargo, entra en conflicto con jQuery validate(), de tal manera que la validación js ya no se ejecuta en el envío de botón/formulario, y reCaptcha se activa instantáneamente. Si el usuario olvida completar un campo de formulario requerido, tendrá que esperar la respuesta del servidor y volver a hacerlo la próxima vez.
jQuery .validate() admite la devolución de llamada, pero debido al hecho de que está codificado de forma rígida dentro de una clase interna de un CMS, ¿hay alguna forma de modificarlo de alguna manera fuera (por ejemplo, desde el tema del front-end, en la carga del documento, cuando el código de validación ya está representado)?
O, otra idea sería posponer la devolución de llamada de captcha de alguna manera, para que el paso de validación pueda tener la oportunidad de ejecutarse.
¡Gracias!
Formulario jQuery Validate: (codificado en el núcleo, no se puede modificar, a menos que edite el archivo central o amplíe la función de clase/clonación; no es óptimo)
<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>procesamiento explícito de reCaptcha:
<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>Tuve el mismo problema, finalmente encontré la forma correcta de integrar jquery validar con reCaptcha invisible. Es una combinación de algunas de las soluciones propuestas aquí.
En primer lugar, la parte HTML:
<div class="g-recaptcha" data-sitekey="<your key here>" data-size="invisible" data-callback="formSubmit"> </div>Luego, debe implementar la devolución de llamada reCaptcha de esa manera:
function formSubmit(response) { // submit the form which now includes a g-recaptcha-response input $("#orderform").submit(); return true; }Y finalmente, la parte difícil está en el controlador de envío de jquery validar:
submitHandler: function (form) { if (grecaptcha.getResponse()) { // 2) finally sending form data form.submit(); }else{ // 1) Before sending we must validate captcha grecaptcha.reset(); grecaptcha.execute(); } }La secuencia es la siguiente:
Espero que esto ayude.
Estaba teniendo un problema similar y validé el formulario antes de ejecutar reCaptcha invisible con la ayuda de este enlace proporcionado por Terry.
Aquí están los pasos:
Agregue este div antes del botón de enviar en su formulario
<div id='recaptcha' class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit" data-size="invisible"></div>Actualice su clave también. Después del cierre del formulario, agregue este método.
<script>onload();</script>Antes de su formulario agregue este código
<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>Realice todas las validaciones en el método de validación y, si todas las validaciones son exitosas, ejecute captcha.
Técnicamente, todo lo que "realmente" queremos hacer es vincular programáticamente el desafío a un botón. Por ejemplo:
Agregue este método, que solo queremos ejecutar el grecaptcha invisible en lugar de la validación "real"
jQuery.validator.addMethod("iv_recapcha_valid", function(value, element) { return grecaptcha.execute(); }, 'No message needed, grecaptcha excecuted');Luego agregue esta regla a sus reglas existentes
rules: { gRecaptchaResponse: { iv_recapcha_valid: true } }añadir un campo oculto
<input type="hidden" name="gRecaptchaResponse" value="" >Ahora, "técnicamente", el botón de envío está vinculado a la acción de clic del usuario