Básicamente estoy intentando detectar cuando el usuario verifica el recaptcha, pero en "tiempo real" quiero decir que el procedimiento es que cuando el usuario verifica un recaptcha al momento el sistema lo detecta y no tengo que esperar a darle click a un botón...
básicamente investigando me encontré que google recaptcha puede capturar tres respuestas por medio de atributos que uno le pone al captcha...
El primero es data-callback="x" => detecta cuando un usuario valida un captcha,
el segundo data-error-callback="y" => detecta cuando ocurre un error como por ejemplo la perdida de conexión,
y por último data-expired-callback="z" => detecta cuando expira el tiempo y el captcha vuelve a como estaba antes...
Bueno teniendo en cuenta estos puntos estoy intentando hacer esto,
HTML
Código
<form method="post"> <input type="text" name=""> <div class="g-recaptcha input_captcha" data-callback="" data-error-callback="" data-expired-callback="" data-sitekey="CLAVE_DEL_SITIO"></div> <button type="submit" name="enviar">enviar</button> </form>
javascript
Código
function Prepare_Recaptcha(position) { var input_captcha = document.querySelectorAll('.input_captcha'); // obtengo todos los captchas html if(input_captcha.length > position) { input_captcha[position].setAttribute('data-error-callback', function() // error connection { input_captcha[position].style.border = '1px solid red'; alert('No se puede conectar a reCAPTCHA. Revisa la conexión y vuelve a intentarlo.'); }); input_captcha[position].setAttribute('data-callback', function() // recaptcha verified { input_captcha[position].style.border = 'none'; }); input_captcha[position].setAttribute('data-expired-callback', function() // recaptcha expired { input_captcha[position].style.border = '1px solid red'; }); } } Prepare_Recaptcha(0); // preparo el primer captcha, si una página tuviera más entonces iría incrementando los valores o mejor aún lo hago con un for para automatizar la tarea y hacerlo más dinámico...