5

Estoy tratando de integrar el recaptcha de Google en un formulario. He conseguido que funcione pero el problema esta en que, pulse o no pulse sobre el captcha, el formulario se envía igualmente. Me gustaría validarlo por medio de JavaScript ya que he visto en la documentación que es posible. Ajunto mi código por si es de utilidad:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js?hl=es'></script>
</head>
<body>

    <form action="#" method="POST">
        <input type="text" name="nombre" placeholder="Nombre...">
        <input type="text" name="apellido" placeholder="Apellido...">
        <div class="g-recaptcha" data-sitekey="6Le9zh8UAAAAAKn-kpHg2Ls7MfqsiOznS7Pp94ja"></div>
        <input type="submit" name="enviar" placeholder="ENVIAR">
    </form>
</body>
</html>

Y aqui dos imagenes de como se me ve el captcha: Primera pantalla de captcha Segunda pantalla de captcha

2
  • Hola amigo una pregunta ando haciendo lo mismo, me podrian colaborar por favor gracias el script y el html lo colocaste en la misma pag? el 2 ago. 2018 a las 16:21
  • Las respuestas resuelven la pregunta a la perfección. Aun así remarcar que es importante validar desde el servidor que se ha resuelto correctamente, ya que validar desde javascript (cliente) jamás es seguro, siempre es vulnerable a que el usuario lo cambie. el 10 mar. 2022 a las 15:24

3 respuestas 3

5

Prueba con este código.

Hay que indicar al formulario que tiene que validarse utilizando el evento "onSubmit" e indicando la función javascript debe lanzarse al pulsar en enviar.

Con respecto al captcha se hace uso de la función "getResponse" que indica si ha sido verificado o no

<!DOCTYPE html>
<html>
  <title>HTML Tutorial</title>

  <head>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>

<body>

  <form action="#" method="POST" onsubmit="miFuncion()">
    <input type="text" name="nombre" placeholder="Nombre...">
    <input type="text" name="apellido" placeholder="Apellido...">
    <div class="g-recaptcha" data-sitekey="6Le9zh8UAAAAAKn-kpHg2Ls7MfqsiOznS7Pp94ja"></div>
    <input type="submit" name="enviar" placeholder="ENVIAR">
  </form>

<script>
  function miFuncion() {
    var response = grecaptcha.getResponse();

    if(response.length == 0){
      alert("Captcha no verificado")
    } else {
      alert("Captcha verificado");
    }
  }
</script>

</body>

</html>
1
  • Muchas gracias, ha funcionado a la perfección :) el 4 may. 2017 a las 21:40
4

El Captcha de Google tiene un método data-callback="...(js function)..." para llamar una funcion javascript una vez que a pasado la prueba, el siguiente ejemplo muestra como activar el boton submit una vez que a pasado la prueba del Captcha:

function enabledSubmit(response) {
 document.getElemenstByName('enviar')[0].disabled = false;
}
<script src='https://www.google.com/recaptcha/api.js'></script>

<form action="#" method="POST">
    <input type="text" name="nombre" placeholder="Nombre...">
    <input type="text" name="apellido" placeholder="Apellido...">
    <div class="g-recaptcha" data-sitekey="6Le9zh8UAAAAAKn-kpHg2Ls7MfqsiOznS7Pp94ja" data-callback="enabledSubmit"></div>
    <input type="submit" name="enviar" placeholder="ENVIAR" disabled>
</form>

3

Muchas gracias por sus respuestas, me orientaron para habilitar el envío del formulario solo cuando se validara el recaptcha, el truco es poner el onsubmit a retornar un valor según la respuesta del captcha:

   <form action="#" onsubmit="return miFuncion(this)" method="POST">
    <input type="text" name="nombre" placeholder="Nombre...">
    <input type="text" name="apellido" placeholder="Apellido...">
    <div class="g-recaptcha" data-sitekey="6Le9zh8UAAAAAKn-kpHg2Ls7MfqsiOznS7Pp94ja" data-callback="enabledSubmit"></div>
    <input type="submit" name="enviar" placeholder="ENVIAR" disabled>
</form>

function miFuncion(a) {
    var response = grecaptcha.getResponse();

    if(response.length == 0){
        alert("Captcha no verificado");
        return false;
      event.preventDefault();
    } else {
      alert("Captcha verificado");
      return true;
    }
  }

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.