1

Tengo un pequeño formulario que inserta datos en una tabla, el cual mediante una javascript me entrega la respuesta del como termino el query. Pero me he percatado que al momento de accionar el Submit, me esta llenando registros en blanco.

Me pueden ayudar a como modificar mi js para poder validar los campos antes de enviarlo.

$(document).ready(function(){
        $('#btnguardar').click(function(){
            var datos=$('#frm-actDatos').serialize();
            $.ajax({
                type: "POST",
                url: "include/actualiza-ok.php",
                data: datos,
                success:function(r){
                    if(r==1){
                        alert("Tus Datos se actualizaron. Muchas gracias");
                    } else {
                        alert("Por favor intenta en unos instantes. Algo salio mal!");
                    }
                }   
            });
            return false;
        });
<form id="frm-actDatos" method="post">
  <div class="form-group">
    <input type="text" name="numcliente" class="form-control" placeholder="Numero de Cliente" required >
  </div>
  <div class="form-group">
    <input type="tel" name="telefono" class="form-control" placeholder="Telefono Móvil" required >
    </div>
    <div class="form-group">
      <input type="email" name="email" class="form-control" placeholder="Correo Electrónico" required >
    </div>
    <div class="form-group">
      <button id="btnguardar" class="form-control boton-blanco" type="submit">Actualizar Datos</button>
      </div>
  </form>

Muchas gracias por su tiempo!

1 respuesta 1

1

Si quieres evitar que se envien los datos cuando los inputs estan vacios, puedes tener el boton de enviar deshabilitado y habilitarlo solo cuando los todos los inputs tengan valores.

Para eso pones todos los inputs en una variable y les asignas una función, de que cuando se modifiquen si hay alguno vacio el boton enviar siga deshabilitado, de otro modo que habilite.

De ese modo se enviará el formulario sin datos en blanco.

var todos = $('input');

$(todos).on('change',() =>{
    $('#btnguardar').prop('disabled', false);
    Array.from(todos).forEach(
      function(element) {
        if(element.value=='')
          $('#btnguardar').prop('disabled', true);
      });
  });

$(document).ready(function(){
    $('#btnguardar').click(function(){
      var datos=$('#frm-actDatos').serialize();
      console.log(datos);
      $.ajax({
        type: "POST",
        url: "include/actualiza-ok.php",
        data: datos,
        success:function(r){
          if(r==1){
            alert("Tus Datos se actualizaron. Muchas gracias");
          } else {
            alert("Por favor intenta en unos instantes. Algo salio mal!");
          }
        }   
      });
      return false;
    });
  });
  
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frm-actDatos" method="post">
  <div class="form-group">
    <input type="text" name="numcliente" class="form-control" placeholder="Numero de Cliente" required >
  </div>
  <div class="form-group">
    <input type="tel" name="telefono" class="form-control" placeholder="Telefono Móvil" required >
    </div>
    <div class="form-group">
      <input type="email" name="email" class="form-control" placeholder="Correo Electrónico" required >
    </div>
    <div class="form-group">
      <button id="btnguardar" class="form-control boton-blanco" type="submit" disabled>Actualizar Datos</button>
      </div>
  </form>

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.