javascript - site - recaptcha v3

Nuevo reCaptcha con el complemento de validación jQuery

Question

Busqué mucho pero no puedo averiguar cómo validar el nuevo reCaptcha , antes del envío del formulario, junto con la función de validación del complemento de validación de jQuery .

Me refiero a algo como esto:

    $.validator.addMethod(''reCaptchaMethod'', function (value, element, param) {
            if (grecaptcha.getResponse() == ''''){
                return false;
            } else {
                // I would like also to check server side if the recaptcha response is good
                return true
            }
        }, ''You must complete the antispam verification'');


    $("#form").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                reCaptcha: {
                    reCaptchaMethod: true   
                }
            },
            messages: {
                name: "Please fill your name",
                email: "Please use a valid email address"
            },
            submitHandler : function () {
                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $(''#form'').serialize(),
                            success : function (data) {
                                $(''#message'').html(data);
                            }
                        });
                    }


        });

En pocas palabras, me gustaría verificar el lado del servidor, con el método remoto , si el usuario ha pasado la validación de recaptcha ANTES de enviar el formulario, junto con otras reglas de validación.

Puedo verificar el envío DESPUÉS de recaptcha (en sendmail.php), pero sería mejor tener la respuesta de validación de recaptcha junto con la validación de otros campos.

La razón principal es para una mejor experiencia de usuario, al tener todos los campos marcados a la vez.

He logrado lograr algo moviendo el cheque dentro de submitHandler:

            submitHandler : function () {
                  if (grecaptcha.getResponse() == ''''){
                      // if error I post a message in a div
                      $( ''#reCaptchaError'' ).html( ''<p>Please verify youare human</p>'' );

                  } else {

                        $.ajax({
                            type : "POST",
                            url : "sendmail.php",
                            data : $(''#form'').serialize(),
                            success : function (data) {
                                $(''#message'').html(data);
                            }
                        });
                    }

             }

Pero no me gustan por 2 razones: 1) Sólo compruebo si el recaptcha se ha llenado, no si es válido. 2) El usuario se siente como una verificación de 2 pasos.

En esta respuesta , dicen que se puede hacer renderizando el Recaptcha en una devolución de llamada, para especificar una llamada de función en una respuesta CAPTCHA exitosa.

Intenté implementar eso, pero no he podido usar esta solución dentro de una regla de la función validate ().

Cualquier sugerencia es bienvenida!

Answer 1

He encontrado que tu solución es interesante (@FabioG).

Pero, lo he modificado un poco para que lo use solo y estoy dispuesto a compartir el código para que otros lo utilicen.

Estaba trabajando en un formulario interactivo, que se validó a medida que completaba los pasos.

Fue utilizado para ordenar comida. Ergo, el formulario requirió la verificación y activación del botón de registro y está utilizando el último reCaptcha hasta la fecha (5/12/2016).

Además, este código maneja reCaptcha vencido, verificación del lado del servidor a través de ajax (masa no incluida, si alguien lo necesita, puede comentar mi respuesta y la editaré en consecuencia).

Empecemos.

El código HTML:

<form id="registerForm" method="get" action="">
<fieldset class="step-1">
<h4>Step One:</h4>
<span class="clock">Register under one minute!</span>
<label for="email-register" class="label">E-mail*</label>
<input id="email-register" name="email-register" type="email" value="" autocomplete="off"/>

<label for="password-register" class="label">Password*</label>
<input id="password-register" name="password-register" type="password" value="" autocomplete="off"/>

<div class="g-recaptcha" data-sitekey="6LeS4O8SAAAAALWqAVWnlcB6TDeIjDDAqoWuoyo9" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired" style="margin-top: 3rem;"></div>
<input id="hidden-grecaptcha" name="hidden-grecaptcha" type="text" style="opacity: 0; position: absolute; top: 0; left: 0; height: 1px; width: 1px;"/>
</div>
</fieldset>
<fieldset class="step-2">
<h4>Step two:</h4>
<span class="notice">All fields with a sign are required!*</span>
<label for="first-name" class="label">First Name*</label>
<input name="first-name" id="first-name" type="text" value="" />

<label for="last-name" class="label">Last Name*</label>
<input name="last-name" id="last-name" type="text" value="" />

<label for="address" class="label">Address*</label> 
<input name="address" id="address" type="text" value=""/>

<label for="entrance" class="label">Entrance</label>    
<input name="entrance" id="entrance" type="text" value=""/>

<label for="apartment-number" class="label">Apartment #</label>
<input name="apartment-number" id="apartment-number" type="text" value="" />

<label for="inter-phone" class="label">Interphone</label>           
<input name="inter-phone" id="inter-phone" type="text" value=""/>

<label for="telephone" class="label">Mobile Number*</label>
<input name="telephone" id="telephone" type="text" value="" />

<label for="special-instructions" class="label">Special Instructions</label>    
<textarea name="special-instructions" id="special-instructions"></textarea>
<div>
</fieldset>
<button class="button-register" disabled>Register</button>
</form>

Como puede ver, el botón de envío (".button-register") está inicialmente desactivado.

Solo puedes habilitarlo rellenando los campos obligatorios (*).

Por favor, tenga en cuenta que no incluí ningún CSS. El formulario está en un mínimo de oso y es sólo para fines educativos.

Algunas cosas que difieren de @FabioG, la respuesta son:

No hay necesidad de ocultar el elemento o usar ".ignore". Lo he escondido con CSS en línea.

Hay una respuesta de devolución de llamada para reCaptcha exitoso y reCaptcha caducado.

Por lo tanto, si su reCaptcha expira al completar el formulario, lo invalidará y el botón se desactivará nuevamente.

Además, el formulario utiliza un campo de entrada (el campo de entrada oculto) para pasar la información a AJAX (PHP más adelante) y verificar que esté en el lado del servidor (es un riesgo potencial de seguridad, lo cubrí más al final del texto) .

Vamos a pasar a JavaScript / jQuery.

JavaScript / jQuery:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
function recaptchaCallback() {
    var response = grecaptcha.getResponse(),
        $button = jQuery(".button-register");
    jQuery("#hidden-grecaptcha").val(response);
    console.log(jQuery("#registerForm").valid());
    if (jQuery("#registerForm").valid()) {
        $button.attr("disabled", false);
    }
    else {
        $button.attr("disabled", "disabled");
    }
}

function recaptchaExpired() {
    var $button = jQuery(".button-register");
    jQuery("#hidden-grecaptcha").val("");
    var $button = jQuery(".button-register");
    if (jQuery("#registerForm").valid()) {
        $button.attr("disabled", false);
    }
    else {
        $button.attr("disabled", "disabled");
    }
}
function submitRegister() {
  //ajax stuff
}
(function ($, root, undefined) {
    $(function () {
        ''use strict'';
        jQuery("#registerForm").find("input").on("keyup", debounce(function() {
          var $button = jQuery(".button-register");
          if (jQuery("#registerForm").valid()) {
            $button.attr("disabled", false);
          }
          else {
            $button.attr("disabled", "disabled");
          }
        }, 1000));
        jQuery("#registerForm").validate({
          rules: {
            "email-register": {
              required: true,
              email: true
            },
            "password-register": {
              required: true,
              minlength: "6"
            },
            "first-name": "required",
            "last-name": "required",
            address: "required",
            telephone: "required",
            "hidden-grecaptcha": {
              required: true,
              minlength: "255"
            }
          },
          messages: {
            "email-register": "Enter valid e-mail address",
            "password-register": {
              required: "Enter valid password",
              minlength: "Password must be bigger then 6 chars!"
            },
            "first-name": "Required!",
            "last-name": "Required!",
            address: "Required!",
            telephone: "Required!"
          },
          submitHandler: submitRegister
        });
    }); 
})(jQuery, this);

Como puede ver aquí, hay algunas funciones: recaptchaCallback () y recaptchaExpired () .

recaptchaCallback () que se incrusta a través del atributo de datos data-callback , usa grecaptcha.getResponse () para ver si el reCaptcha está validado, si es así, ingresa el token al campo de entrada oculto y solicita la revalidación a través del jQuery ( "#registerForm) .validate ();.

Sin embargo, si reCaptcha expira mientras tanto, usará la función asignada en la "devolución de llamada caducada de datos", para eliminar el token del campo de entrada y solicitar una nueva validación nuevamente, lo que fallará porque el campo está vacío. Esto se logra con la función recaptchaExpired () .

Más adelante, en el código, puede ver que agregamos una función de activación de clave jQuery, para verificar la re-validación y ver si el usuario ha pasado la información requerida a los campos de entrada. Si la información y el campo se validan exitosamente, la función keyup habilitará el botón Registrar .

También, he usado un script de debounce (tnx, David Walsh) en keyup . Por lo que no causa retraso del navegador. Desde entonces, habría mucho que escribir.

Pero, tenga en cuenta que si un usuario decide eludir el reCaptcha, siempre puede ingresar una cadena de "255" caracteres en el campo de entrada. Pero, he ido un paso más allá e hice un lado del servidor de verificación AJAX para confirmar el reCaptcha. Masa, no la he incluido en la respuesta.

Piensa que este código es una mejora marginal en la respuesta anterior. Si tiene alguna pregunta o necesita el código AJAX / PHP, no dude en comentar. Lo suministraré cuando pueda.

Aquí está el código: reCaptcha con jQuery.validation

Puede encontrar toda la información sobre los atributos de datos y funciones de reCatpcha en su api aquí: API de reCaptcha

Espero que haya ayudado a alguien!

Saludos,

Answer 2

Luché con este hoy y terminé yendo con:

<form onsubmit="return $(this).valid() && grecaptcha.getResponse() != ''''">

Lo que simplemente se siente como la forma más sencilla de hacerlo. Alguien está obligado a quejarse de poner js en línea así, pero estoy de acuerdo con eso.

Answer 3

Sé que esta pregunta está un poco anticuada, pero tenía el mismo problema y acabo de encontrar la solución. Puedes hacer esto agregando un campo oculto al lado de reCaptcha div, como:

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

entonces en tu javascript:

$("#form").validate({
        ignore: ".ignore",
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '''') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },(...rest of your code)

Observe que debe tener ignore: ".ignore" en su código porque jquery.validate ignora los campos ocultos de manera predeterminada, no validándolos.

Si desea eliminar el mensaje de error en reCapcha validate, agregue una devolución de llamada de datos al elemento reCapcha

<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}" data-callback="recaptchaCallback"></div>

Y luego en su archivo js agregar

function recaptchaCallback() {
  $(''#hiddenRecaptcha'').valid();
};

Answer 4

También puede evitar que el formulario se envíe en submitHandler

$("#loginForm").validate({
rules: {
    username: {
        required: true,
        minlength: 6
    },
    password: {
        required: true,
    },
},
submitHandler: function(form) {
    if (grecaptcha.getResponse()) {
        form.submit();
    } else {
        alert(''Please confirm captcha to proceed'')
    }
}
});