0

He creado una web con varios formularios. Les incluí un botón para que tengan que aceptar los términos y hasta que no se hace check no se puede enviar. Pero aun así recibo muchísimo spam, entonces quiero validar que los campos no vayan vacíos y que alguna validación más.

Pongo un formulario super sencillo para suscribirse a una Newsletter, para no llenar esto mucho.

Código del formulario:

       <form enctype="multipart/form-data" id="news" method="post" >
          <div class="form-group">
            <i class="far fa-envelope form-control-email"></i>
            <input type="email" class="form-control myInput" name="email" id="email" placeholder="Tu email...">
          </div>
          <div class="" id="mensajeNEWS">
            <input name="chec" class="chzxc" type="checkbox" id="chec" onchange="comprobarNews(this);" 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>
          <button type="submit" id="llamada229" class="btn btn-primary btnNews" disabled>Suscribete</button>
        </form>

Función Javascript para la respuesta del envio.

$(function(){
     $("#news").on("submit", function(e){
         e.preventDefault();
         var f = $(this);
         var formData = new FormData(document.getElementById("news"));
         formData.append("dato", "valor");

         $.ajax({
             url: "respuestas/respuesta-news.php",
             type: "post",
             dataType: "html",
             data: formData,
             cache: false,
             contentType: false,
             processData: false,

              beforeSend: function(){
               $("#mensajeNEWS").html("<div class='ui active inline loader myLoader' style='margin-bottom:1%;'></div>")
               },
              success: function (resultado){
               setTimeout(function(){
                 $("#mensajeNEWS").html(resultado);
               }, 1300);
             }
           });
               setTimeout(function () {
                 location.reload();
               }, 5000); //will call the function after 2 secs
        });
     });

Para comprobar si el check esta clicado y así se activa el botón.

function comprobarNews(obj)
    {
      if (obj.checked)
       document.getElementById('llamada229').disabled = false;
      else
       document.getElementById('llamada229').disabled = true;
    }

Todo esto funciona, pero como hago para validar los campos??? Saludos

6
  • 1
    Si solamente quieres evitar que vayan vacíos con ponerle a los <input> el atributo required te valdría. Ejemplo: <input type="text" required>.
    – phpMyGuel
    Commented el 23 mar. 2020 a las 19:32
  • Hola y gracias por tu respuesta, pero required no funciona en todos los navegadores si no recuerdo mal no?
    – Miguel
    Commented el 23 mar. 2020 a las 19:33
  • 100% compatible con todos los navegadores, por lo que MDN dice: developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
    – phpMyGuel
    Commented el 23 mar. 2020 a las 19:41
  • No está claro a que te refieres con "validar los campos". ¿Te refieres a que sean obligatorios?
    – Rubén
    Commented el 23 mar. 2020 a las 20:09
  • Sabes aunque coloques un jquery validate o un required, tu problema es otro. Te aconsejo que estudies CAPTCHA
    – Synay
    Commented el 23 mar. 2020 a las 20:47

1 respuesta 1

1

podrias hacer un if antes de enviar la consulta.

    $(function(){
     $("#news").on("submit", function(e){
         e.preventDefault();
         var f = $(this);
         var formData = new FormData(document.getElementById("news"));
         formData.append("dato", "valor");

         //una ves se presione el boton y antes de enviar por ajax
         if ($("#email").val().trim() != '') {
          $.ajax({
             url: "respuestas/respuesta-news.php",
             type: "post",
             dataType: "html",
             data: formData,
             cache: false,
             contentType: false,
             processData: false,

              beforeSend: function(){
               $("#mensajeNEWS").html("<div class='ui active inline loader myLoader' style='margin-bottom:1%;'></div>")
               },
              success: function (resultado){
               setTimeout(function(){
                 $("#mensajeNEWS").html(resultado);
               }, 1300);
             }
           });
            setTimeout(function () {
                 location.reload();
               }, 5000); //will call the function after 2 secs
         }else{
          alert('email vacio');
         }

        });
     });

function comprobarNews(obj)
    {
      if (obj.checked)
       document.getElementById('llamada229').disabled = false;
      else
       document.getElementById('llamada229').disabled = true;
    }

Si de paso, necesitas validar mas campos (que es lo mas seguro) debes agregar otro if dentro. Por ejemplo:

$(function(){
     $("#news").on("submit", function(e){
         e.preventDefault();
         var f = $(this);
         var formData = new FormData(document.getElementById("news"));
         formData.append("dato", "valor");

         //una ves se presione el boton y antes de enviar por ajax
         if ($("#nombre").val().trim() != '') {
            if ($("#email").val().trim() != '') {
              //aqui tu codigo si todo es correcto
            }else{
              alert('email vacio');
            }
         }else{
          alert('nombre vacio');
         }

        });
     });

Solo debes usar $("#input").val() dentro de el if reemplazando #input por el ID de tu input. Otra cosa importante también es agregar después de val() la opción .trim() que automáticamente elimina los espacios en blanco. Saludos.

2
  • Muchas gracias por la solución!! ;)
    – Miguel
    Commented el 24 mar. 2020 a las 19:23
  • Te recomendaría que vieras el tema de captaba como dicen mas arriba. Puedes usar el de google, es muy fácil de integrar y solo debes integrar un código javascript, por ende no es necesario modificar casi nada de tu código. Busca la documentación, está todo en español y fácil de entender. Suerte. Commented el 24 mar. 2020 a las 23:59

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.