1

Intento mandar la información de un form, a una base de datos, lo que antes de enviarla, quiero comprobar que todos los campos que haya marcado con "required" esten rellenados.

Para ello estoy intentando lo siguiente:

$("#comprobarDatos").on("click", function(e){     
if(!valid) {
        e.preventDefault();
      } else {
        $.ajax({
          type: 'POST',
          url: 'php/enviar_pedido.php',
          data: {'referencia': referencia, 
                 'detalles': detallesCi,
                 'tipo': tipoCi,
                  ...etc
                  }
        })
        .done(function(){
          alert('Pedido enviado con éxito');
        })
        .fail(function(){
          alert("Error 01");
        })
})

Este es el INPUT:

<input type="submit" id="comprobarDatos" value="Comprobar Pedido">

Si que valida que los campos estén en required. Sin embargo, no ejecuta nada del AJAX.

Gracias.

5
  • De dónde viene tu variable valid?
    – Dibort
    Commented el 27 ago. 2018 a las 15:01
  • No viene de ningún sitio :/ Commented el 27 ago. 2018 a las 15:04
  • Leí, que se podía utilizar valid, para comprobar Commented el 27 ago. 2018 a las 15:05
  • Hablas del plugin jQuery Validation? En el caso de estar utilizándolo, fíjate en el enlace anterior como funciona. No es valid sin más, tienes que decirle el qué validar
    – Dibort
    Commented el 27 ago. 2018 a las 15:08
  • No tengo el plugin, tal vez tengo mal el código, no soy experto en jQuery, con lo que agradecería saber como podría realizar esta función, si no quedan campos con required, que ejecute el ajax. Siento si no he sabido explicarme bien, pero no domino todavía este lenguaje. Commented el 27 ago. 2018 a las 15:11

2 respuestas 2

2

Podrías hacerlo así:

$("#tuformulario").on("submit", function(e){
  e.preventDefault(); // Para no realizar el action del form
  $.ajax({
    type: 'POST',
    url: 'php/enviar_pedido.php',
    data: {'referencia': "test", 
           'detalles': "test2"}
  })
  .done(function(){
    alert('Pedido enviado con éxito');
  })
  .fail(function(){
    alert("Error 01");
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="tuformulario">
  <input name="referencia" id="referencia" required />
  <input name="detalles" id="detallesCi" required />
  <input type="submit" id="comprobarDatos" value="Comprobar" />
</form>

Al hacerlo con onsubmit ya verás que el propio navegador te frena si no están correctamente rellenados los campos required, entonces no te haría falta utilizar checkValidity.

Igualmente te dejo enlace a documentación de checkValidity.

1
  • Genial!!! Esto es lo que necesitaba, miles de gracias !!!!! Commented el 27 ago. 2018 a las 15:34
0

utiliza el metodo submit en el form y como se que envias los datos por ajax colocale un return false

$("#form").submit(function(){
  $.ajax({
    type: 'POST',
    url: 'php/enviar_pedido.php',
    data: {'referencia': "test", 
           'detalles': "test2"}
  })
  .done(function(){
    alert('Pedido enviado con éxito');
  })
  .fail(function(){
    alert("Error 01");
  });
  return false;
})

la validacion dejaselo a los requied

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.