validacion - Validación de formularios HTML5 antes de reCAPTCHA''s.

validar formulario jquery antes de enviar

Question

He integrado el nuevo marco oculto reCAPTCHA (v2) que, de forma predeterminada, verifica al usuario con el evento de clic del botón de envío. Pero este evento se desencadena antes de la validación de formularios HTML5 integrada. Estoy buscando una manera de hacerlo en el orden esperado: la validación de formularios primero, reCAPTCHA después.

Answer 1

Aquí está mi solución para obtener la validación HTML5 + Recaptcha invisible:

HTML:

<form id="my-form">
    <!-- Your form fields ... -->
    <div class="g-recaptcha"
        data-sitekey="..."
        data-callback="submitMyForm"
        data-size="invisible">
    </div>
    <button type="submit">Submit</button>
</form>

JS:

var myForm = $(''my-form'');

function submitMyForm () {
    myForm.trigger(''submit'', [true]);
}

$(function () {
    myForm.on(''submit'', function (e, skipRecaptcha) {
        if(skipRecaptcha) {
            return;
        }

        e.preventDefault();
        grecaptcha.execute();
    });
  })

Answer 2

Hola tengo una solución de trabajo aquí. Trabajando con invisible recaptcha.

jQuery(document).ready(function() {
    var commentform = jQuery("#commentform");
    commentform.on("click", "#submit-comment", function(e) {
      if(commentform[0].checkValidity()) {
        e.preventDefault();
        grecaptcha.execute();
      }
    });
});

function submitCommentForm(data) {
    document.getElementById("commentform").submit();
}

<form action="blaba.php" method="post" id="commentform" class="comment-form">
  <div class="form-submit">
    <div data-callback="submitCommentForm" data-sitekey="yourkey" class="g-recaptcha" data-size="invisible">
    <button id="submit-comment">Leave a comment</button>
  </div>
</form>

Answer 3

Quería el mismo comportamiento, pero usando el nuevo recaptcha, el invisible. Después de mirar un código y probar algunas cosas, me metí en esto. La principal diferencia es que también utiliza la validación predeterminada del navegador :

var contact_form;
$(function() {
    contact_form = $(''#contact-form'');
    contact_form.submit(function (event) {
        if ( ! contact_form.data(''passed'')) {
            event.preventDefault();
            grecaptcha.execute();
        }
    });
});
function sendContactForm(token) {
    contact_form.data(''passed'', true);
    contact_form.submit();
}

Básicamente, almacena el objeto de formulario jquery en una var global, incluyendo, usa sendContactForm como devolución de llamada, pero cuando es llamado por recaptcha, establece una variable de datos llamada pass, que permite que no se impida el formulario. Es exactamente el mismo comportamiento que recaptcha haría normalmente, pero con esa condición.

Actualización : volver a mirar mi código correcto me recuerda que probablemente necesite una forma de restaurar los datos pasados ​​a false después de la ejecución de grecaptcha. Considera eso si vas a implementar esto.

Answer 4

Tienes que hacerlo programáticamente gracias a un nuevo método v2 grecaptcha : grecaptcha.execute() para que recaptcha no reemplace el evento de clic predeterminado del botón que impedía la validación de la forma HTML5 predeterminada.

La ruta del evento es:

1. Enviar evento de clic de botón: validación de formulario incorporada en el navegador
2. Evento de envío de formulario: llame a grecaptcha.execute()
3. Devolución de llamada reCAPTCHA: enviar el formulario

$(''#form-contact'').submit(function (event) {
    event.preventDefault();
    grecaptcha.reset();
    grecaptcha.execute();
  });

function formSubmit(response) {
  // submit the form which now includes a g-recaptcha-response input
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?">
  <div class="g-recaptcha" 
       data-sitekey="your-key"
       data-size="invisible"
       data-callback="formSubmit">
  </div>
  <button type="submit">Submit</button>
</form>

Answer 5

 let siteKey = "...";
 $("form").submit(function (eventObj) {
        var myForm = this;
        eventObj.preventDefault();
        grecaptcha.execute( siteKey, {
            action: "submit"
        })
            .then(function (token) {
                $(''<input />'').attr(''type'', ''hidden'')
                    .attr(''name'', "g_recaptcha_response")
                    .attr(''value'', token)
                    .appendTo(myForm);
                myForm.submit();
            });
    });

Esto ejecutará recapcha, esperará respuesta, agregará el atributo oculto g_recaptcha_response a cualquier formulario cuando el navegador intente enviarlo y luego lo envíe. Necesita la variable global siteKey