0

hace algún tiempo hice unas validaciones de formulario, tanto de los inputs como el checkbox de la política. Pero aun así se lo siguen pasando por lo alto y recibo SPAM de email vacios. He pensado en meter un CAPTCHA porque ya no se que hacer.

Formulario

<div id="formContacto" class="col-12 center contactInfo esPacioForm1231" style="background: #666666;">
  <div class="container">
    <h2>¿Quieres más información?</h2>
    <p>Nuestro equipo de profesionales está a tu disposición para detallarte la información que necesita</p>

    <form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo" >
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-user form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="nombre" id="nombreLL" placeholder="Persona de contacto" required >
          </div>
          <div class="separaInput">
            <i class="fas fa-mobile-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="telefono" id="telefono" placeholder="Teléfono"required>
          </div>
          <div class="separaInput">
            <i class="fas fa-envelope form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="email" id="email" placeholder="Email"  required>
          </div>
          <div class="separaInput">
            <i class="fas fa-map-marker-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-building form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
          </div>
          <div class="separaInput" style="display:none;">
            <i class="fas fa-sign-in-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
          </div>
          <div class="form-group separaInput2">

            <textarea class="form-control text-input myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
          </div>
        </div>
      </div>
      <div class="col-12 center">
        <div class="">
          <input type="checkbox" class="micheckbox334" id="micheckbox334" style="display:inline-block;">
          <label class="labTerm" style="display:inline;">He leído y acepto la <a href="privacidad-y-condiciones.php" title="Privacidad y Condiciones">Privacidad y Condiciones</a></label>
        </div>
      </div>
      <div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">

      </div>
      <div class="g-recaptcha" data-sitekey="8gh490rhg4ng8h4n"></div>
      <div class="aceptoTerm">
        ACEPTO QUE TENGO EL CONCEPTO DE MED-APOLO PARA RECOPILAR Y USAR MI INFORMACIÓN PERSONAL DE ACUERDO CON LA POLÍTICA DE PRIVACIDAD DEL CONCEPTO DE MED-APOLO. *
      </div>
      <button  type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled="disabled">MÁS INFORMACIÓN</button>
    </form>
  </div>
</div>

La petición

$(function () {
    $('#infoEquipo').submit(function (evento) {
      evento.preventDefault();
      var f = $(this);
      var formData = new FormData(document.getElementById("infoEquipo"));
      formData.append("dato", "valor");
  
      let validado = validar_campos_info_equipo();
      
      if(validado) {
        $.ajax({
          /*url: "respuestas/respuesta-infoEquipo.php",*/
          type: "post",
          dataType: "html",
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
  
           beforeSend: function(){
            $("#mensajeResp").html("<div class='ui active inline loader myLoader' style='margin-bottom:1%;'></div>")
            },
           success: function (resultado){
            setTimeout(function(){
              $("#mensajeResp").html(resultado);
            }, 1300);
          }
        });
            setTimeout(function () {
              location.reload();
            }, 5000); //will call the function after 2 secs
      }
      else {
        console.log('No se lanza la llamada AJAX');
      }
    });
    
    $('#infoEquipo input').change(function () {
      let validado = validar_campos_info_equipo();
      var response = grecaptcha.getResponse();
      
      if (validado) {
        $('#llamada223').prop('disabled', false);
      }
      else {
        $('#llamada223').prop('disabled', true);
      }
    });
  })
  
  function validar_campos_info_equipo() {
    let inputs = $('#infoEquipo input');
    let validado = true;
    
    inputs.each(function () {
      let input = $(this);
      let tipo_input = input.attr('type')
      let expresion = /\w/;
      
      if (tipo_input === 'checkbox') {
        if (!input.is(':checked')) {
          validado = false;
        }
      }
      else {
        if (!expresion.test(input.val())) {
          validado = false;
        }
      }
    });
    
    return validado;
  }

Mi interés es que hasta que no esté todo rellenado y pulsado el captcha el botón no se quite el disabled ya que tengo una conversión con eso.

Entonces en el formulario ya he integrado el captcha, pero no se donde poner la validación? alguna sugerecia por favor?.

Si teneis una sugerecia mejor estoy abierto a nuevas ideas, ya que no se que hacer más para no recibir Spam.

3
  • Ademas de en el cliente, la verificación se debe hacer del lado del servidor (php) porque la del cliente se puede esquivar y solo sirve para evitar que se ingrese en el formulario datos incorrectos con buenas intenciones (no spam). Del lado del cliente se hace la verificación con captcha y el resultado devuelve un código que luego debes mandar al servidor y verificarlo ahí. Para el captcha puedes probar reCAPTCHA o hCaptcha
    – braver
    Commented el 14 oct. 2020 a las 17:18
  • Si lo que voy a utilizar es reCAPTCHA, pero no se como validarlo la verdad?.. @braver
    – Miguel
    Commented el 14 oct. 2020 a las 17:20
  • En esta página de reCAPTCHA v2 se explica cómo agregar el widget a la pagina, y en esta cómo verificar la respuesta del usuario. En youtube hay videos con tutoriales tambien.
    – braver
    Commented el 14 oct. 2020 a las 17:42

1 respuesta 1

0

Se puede verificar el recaptcha de la siguiente forma:

<?php

$data = array("secret" => "llave secreta",
              "response" => $_POST["g-recaptcha-response"]);
              // "remoteip" => "8.8.8.8") // ip del usuario (opcional)

$options = array(
    "http" => array(
        "header" => "Content-Type: application/x-www-form-urlencoded\r\n",
        "method" => "POST",
        "content" => http_build_query($data)
    )
);

$context = stream_context_create($options);

$url = "https://www.google.com/recaptcha/api/siteverify";

$result = file_get_contents($url, false, $context);

if ($result === FALSE) {
    /* error en la peticion para verificar el captcha */
    die();
}

$json_result = json_decode($result);

if ($json_result["success"] === true) {
    /* la petición es legítima, guardar el ticket */
} else {
    /* el captcha no es correcto, no hacer nada
    die();
}

?>

Básicamente se envia una petición a https://www.google.com/recaptcha/api/siteverify con tres parametros:

  • "secret": con la llave secreta que proporciona Google
  • "response": el resultado de la prueba de captcha, enviado por el cliente
  • "remoteip" (opcional): la ip del usuario que realizo el captcha. Supongo que Google lo usa para mostrar captchas más dificiles a programas que los automatizan.

El cuerpo de la respuesta está en JSON así que se lo procesa, y el resultado de la verificación esta en la llave "success". Si es true la verificación fue correcta y se guarda el ticket. Si no lo es, se muestra un mensaje de error en el cliente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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