Question

Hola amigos, tengo un detalle con la validación de un formulario de contacto, le agregue el captcha de google pero me da problemas al querer validarlo para que sea requerido, al principio quise validarlo así como lo muestro a continuación pero al realizar mis pruebas mi mensaje se envía sin que yo le de click en el captcha cuando forzosamente debe de pedirme que le de click en el captcha.

    <form action="contacto.php" method="post">

        <label for="name"></label>

         <input class="w-input" type="text" id="name" placeholder="Ingresa tu nombre" name="name" required="required">

       <label for="email"></label>

         <input class="w-input" placeholder="Ingresa tu correo electrónico" type="text"  id="email" name="email" required="required">

      <label for="phone"></label>

           <input class="w-input" placeholder="Ingresa tu teléfono" type="text"  id="phone" name="phone" required="required">

       <label for="message"></label>

         <textarea class="w-input message" placeholder="Escribe tu mensaje" id="message" name="message" required="required"></textarea><br>
         <div class="center">
         <!--/////////Captcha/////////-->
          <div class="g-recaptcha" data-sitekey="6Ldo_B8UAAAAAFgTDb4ChXhBv6xlVPlYZAnEXCd0" data-theme="dark" align="center"></div>
         <!--/////////Captcha/////////-->
         </div>
         <br>
       <input class="button medium" type="submit" value="Enviar">

     </form>

-------ARCHIVO DE contacto.php-------

    <?php
    $nombre = $_POST['name'];
    $email = $_POST['email'];
    $telefono = $_POST['phone'];
    $recaptcha = $_POST['g-recaptcha-response'];
    $destinatario = '[email protected]';
    $asunto = $_POST['message'];
    $mensaje = 'Nombre: ' . $nombre . "\n" . $telefono = 'Telefono: ' . $telefono = $_POST['phone'] . "\n" . 'Mensaje: ' . $_POST['message'];
    $cabecera = "From:" . $email. "\r\n" . "Reply-To: " . $email;

    if(mail($destinatario, $asunto, $mensaje, $cabecera, $recaptcha != '')){
    $secret="6Ldo_B8UAAAAAEy4tSycdIbRdXuDnaoHy1iiUH5a";
    $ip = $SERVER['REMOTE_ADDR'];
    $var = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$recaptcha&remoteip=$ip");
    $array = json_decode($var, true);
    $enviado= "Tu mensaje ha sido enviado exitosamente";
    if ($array['success']){
    echo "soy humano";
    }else{
    echo "soy un robot";
    }
    print "<script>alert('$enviado')</script>";
    print("<script>window.location.replace('index.html');</script>");
    }else{
    echo "El mensaje no se pudo enviar;";
    }

    ?>

Después, encontré esta forma de validar mi captcha, como lo muestro a continuación,ya me pide forzosamente el captcha, pero en el action de mi formulario ya no puedo agregar mi archivo contacto.php que es el que contiene la configuración que me envía los mensajes al correo

        <form action="**javascript:alert(grecaptcha.getResponse(widgetId1));**">

        <label for="name"></label>

         <input class="w-input" type="text" id="name" placeholder="Ingresa tu nombre" name="name" required="required">

       <label for="email"></label>

         <input class="w-input" placeholder="Ingresa tu correo electrónico" type="text"  id="email" name="email" required="required">

      <label for="phone"></label>

           <input class="w-input" placeholder="Ingresa tu teléfono" type="text"  id="phone" name="phone" required="required">

       <label for="message"></label>

         <textarea class="w-input message" placeholder="Escribe tu mensaje" id="message" name="message" required="required"></textarea><br>
         <div class="center">
         <!--/////////Captcha/////////-->
          <div class="g-recaptcha" data-sitekey="6Ldo_B8UAAAAAFgTDb4ChXhBv6xlVPlYZAnEXCd0" data-theme="dark" align="center"></div>
         <!--/////////Captcha/////////-->
         </div>
         <br>
       <input class="button medium" type="submit" value="getResponse">

     </form>

¿COMO PUEDO HACER QUE MI FORMULARIO ME REALICE AMBAS COSAS, ES DECIR QUE ME VALIDE EL CAPTCHA DE FORMA REQUERIDA Y ME ENVÍE LOS DATOS LLENADOS EN EL FORMULARIO AL CORREO ? AYUDA! PORFAVOR AMIGOS!

Comments

Por que no utilizas jquery validate

---

PERDON OLVIDE AGREGAR EL SCRIPT

 <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>

Lo utilice por que encontré este ejemplo en la misma página de google recaptcha

<body>

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
<body>
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>

    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>

    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
    </script>
  </body>
</html>

La verdad es que es la primera vez que implemento este captcha en un formulario de contacto.

---

@johana Por favor utiliza el botón de código al poner tu código para que salga con formato.

Gracias.

---

@johana tienes el form, un envio de un submit. Te recomiendo nuevamente que uses la libreria jquery validate, es facil de usar y sencilla, y documentada respecto a lo que buscas Ejercicio, Ejemplo de validación CAPTCHA

Answer 1

Hola @johana seria bueno validar todo con JS, y luego desde la misma validacion via ajax, json etc, envies tu formulario de esta manera al llegar a tu archivo PHP ya vas solo a procesar los datos, si te fijas el action esta ya siendo ocupado por una llamada JS, puedes poner eso en el boton de enviar esa funcion JS y cuando haga todo el proceso del captcha le mandas el submit colocando en el action tu archivo PHP, solo es una forma de ver pero en esto de validaciones JS es una opcion bien fiable

Answer 2

Hola @johana,

el atributo "required" es para los elementos de formualarios: input, select y textarea.

No se puede poner un requered a un DIV.

Le podés poner que sean requerido a tus datos, pero la validación del CAPTCHA la tenés que leer en el script de destino, que te devolverá FALSO si validó mal o si no completó la validación.

Saludos cordiales