¿Cómo puedo hacer que reCAPTCHA sea un campo obligatorio?

Estoy usando Google reCAPTCHA y he podido agregar el componente CAPTCHA a mi página dentro de un formulario. Pero cuando envío el formulario no hay validación que se lleve a cabo para verificar si el CAPTCHA se ha resuelto.

¿Cómo valido que el componente CAPTCHA se haya resuelto al enviar mi formulario? O, en otras palabras, ¿cómo hago necesario mi componente CAPTCHA?

 26
recaptcha
Author: carlosHT, 2014-12-30
Source

5 answers

Tuve el mismo problema que el tuyo y lo resolví de esta manera:{[12]]}

Primero declare una variable que almacena 1 o 0 dependiendo de si el usuario llenó el capcha correctamente.

var allowSubmit = false;

Entonces necesita una función que se ejecuta cuando el usuario llena el reCapcha correctamente: 

function capcha_filled () {
    allowSubmit = true;
}

... y una función que se ejecuta cuando expira la sesión reCapcha: 

function capcha_expired () {
    allowSubmit = false;
}

Para decirle a reCapcha acerca de sus funciones (callbacks), establezca esos atributos data-en su html: 

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

O si utiliza carga explícita: 

  var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

También necesita una devolución de llamada para el envío del formulario:

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

Finalmente agregue en la forma el atributo onsubmit: 

<form action="..." onsubmit="check_if_capcha_is_filled">

Nota: como se mencionó en los comentarios, todavía se necesita una validación de servidor . El código evita enviar accidentalmente el formulario a menos que se llene el capcha y es solo para conveniencia del usuario.

 17
Author: Al.G.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-19 19:01:49

Si desea utilizar las ventanas emergentes html5 nativas, aquí está la solución

JavaScript: 

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS: 

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}
 25
Author: Fred,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-05 10:20:01

Encontré que esta es una forma rápida y fácil de hacerlo. Añade esto a tus encabezados:

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

Esto solo funciona en HTML5, y es (o debería ser) soportado por estos navegadores: http://caniuse.com/#feat=form-validation

(La consola JS en Chrome muestra este mensaje de error: "Control de formulario no válido" solo en Google Chrome, y no he sido capaz de trabajar alrededor de esto. Esperemos que alguien más mejore esta respuesta.)

 9
Author: secenv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:29

He comprobado la existencia de #g-recaptcha-response: 

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

Esto realmente debería ser parte de los documentos...

 7
Author: citynorman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-13 15:46:21

No estoy seguro si ya resolviste esto, pero podrías usar un complemento para validar el recaptcha de Google: http://formvalidation.io/addons/recaptcha2 /

 1
Author: ForTheWin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-31 19:32:34