Nuevo reCaptcha con el complemento de validación jQuery

$("#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)

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

$("#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')
    

);

Step One:
Register under one minute!
E-mail*


Password*

Como puede ver, el botón de envío (“.button-register”) es inicialmente discapacitado.

Solo puede habilitarlo llenando el obligatorio

los campos.

Por favor, tenga en cuenta que no incluí ningún CSS. El formulario es mínimo y es solo para fines educativos.

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

No es necesario ocultar el elemento o utilizar el “.ignore”. Lo he ocultado con CSS en línea. Hay un respuesta de devolución de llamada

para una reCaptcha exitosa y una reCaptcha vencida. Entonces, si su reCaptcha expira mientras completa el formulario, lo hará inválido y el botón será discapacitado

de nuevo. 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 verificarla del lado del servidor.

(Es un riesgo potencial para la seguridad, lo cubrí más al final del texto).

Pasemos a 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);

JavaScript / jQuery: Como puede ver aquí, hay algunas funciones: recaptchaCallback () yrecaptchaExpired ()

. recaptchaCallback () attribute que está incrustado a través de los datosdevolución de llamada de datos , usa el grecaptcha.getResponse () para ver si el reCaptcha está validado, si es así, ingresa el token en el campo de entrada oculto y solicita la revalidación a través deljQuery (“# ​​registerForm) .validate ();

. Sin embargo, si el reCaptcha expira mientras tanto, usará la función asignada en el “data-expired-callback”, para eliminar el token del campo de entrada y solicitar la revalidación nuevamente, lo que fallará porque el campo está vacío. Esto se logra con la funciónrecaptchaExpired ()

. Más adelante en el código, puede ver que agregamos un jQuery tecla Arriba función, para verificar la revalidación y ver si el usuario ha pasado la información requerida a los campos de entrada. Si la información y el campo validan satisfactoriamente la tecla Arriba La función habilitará la Registrarse

botón. Además, he usado un script antirrebote (tnx, David Walsh) entecla Arriba

. Por lo tanto, no causa retraso en el navegador. Dado que, habría que escribir mucho. string Pero tenga en cuenta que si un usuario decide eludir el reCaptcha, siempre puede ingresar “255” caracteres de longitud.

al campo de entrada. Pero, fui 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.

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

Aquí está el codepen también: reCaptcha con jQuery.validationattributes Puede encontrar toda la información sobre los datos de reCatpcha-

y funciones en su api aquí: reCaptcha API

¡Espero que haya ayudado a alguien!

Saludos,

Si para ti ha sido de provecho este post, te agradeceríamos que lo compartas con el resto seniors y nos ayudes a extender nuestro contenido.

Utiliza Nuestro Buscador