0

estoy tratando de configurar un modal pero al dar click en enviar asi los campos esten vacios se procesa el envio con datos null aun cuando en mysql lo tngo configurado para no aceptar datos vacios pero de igual manera se crea una fila con campos vacios.

el modal es el siguiente

<div class="modal fade" id="agregarnuevosdatosmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Agrega nuevo Dato</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="frmnuevo" autocomplete="on" class="was-validated">

    <div class="form-group">
                    <label>CI Cliente</label>
                    <input onkeyup="mayus(this);" pattern="[V,J,G,E]{1}[-][0-9]{7,9}" placeholder="V-12345678 J-12345678 E-12345678" type="text" class="form-control input-sm" id="ci_cliente" name="ci_cliente" required>
        <div class="invalid-feedback">Debe indicar el numero de Cedula o Rif en el formato V-12345678.</div>
    </div>

    <div class="form-group">
                    <label>Descripcion</label>
                    <input placeholder="Indique una descripcion de la Operacion" type="text" class="form-control input-sm" id="descripcion" name="descripcion" required>
    </div>

    <div class="form-group">
                    <label>Plataforma Origen</label>
        <select class="custom-select" id="plataforma_origen" name="plataforma_origen" required >
          <option value="">Seleccione:</option>
          <?php
          $query_plataforma = "SELECT * FROM plataforma ORDER BY plataforma";
          $results = mysqli_query($db, $query_plataforma);
          while($row = $results->fetch_assoc()) { ?>
                <option value="<?php echo $row['id']; ?>"><?php echo strtoupper($row['plataforma']); ?></option>
            <?php } ?>
        </select>
    </div>

    <div class="form-group">
        <label>Plataforma Destino</label>
        <select class="custom-select" id="plataforma_destino" name="plataforma_destino" required >
          <option value="">Seleccione:</option>
          <?php
          $results = mysqli_query($db, $query_plataforma);
          while($row = $results->fetch_assoc()) { ?>
                <option value="<?php echo $row['id']; ?>"><?php echo strtoupper($row['plataforma']); ?></option>
            <?php } ?>
        </select>
    </div>

    <div class="form-group">
        <label>Nro Operacion</label>
                    <input placeholder="Numero de operacion" type="text" class="form-control input-sm" id="nro_operacion" name="nro_operacion" required>
    </div>

    <div class="form-group">
        <label>Motivo</label>
        <select class="custom-select" id="motivo" name="motivo" required >
          <option value="">Seleccione:</option>
          <?php
          $query_motivo = "SELECT * FROM motivo ORDER BY id";
          $results = mysqli_query($db, $query_motivo);
          while($row = $results->fetch_assoc()) { ?>
                <option value="<?php echo $row['id']; ?>"><?php echo strtoupper($row['motivo']); ?></option>
            <?php } ?>
        </select>
    </div>


    <div class="form-group">
        <label>Monto</label>
                    <input placeholder="Monto" type="number" class="form-control input-sm" id="monto" name="monto" required>
        <label>Fecha Operacion</label>
                    <input data-date-format="yyyy/mm/dd" type="text" class="form-control input-sm" id="fecha_operacion" name="fecha_operacion" required>
                    <input type="hidden" class="form-control input-sm" id="id_admin" name="id_admin" value="<?php echo $id_admin; ?>">
    </div>


                </form>
            </div>
            <div class="modal-footer">
      <button data-dismiss="modal" type="submit" id="btnAgregarnuevo" class="btn btn-primary">Agregar</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>

            </div>
        </div>
    </div>
</div>

El JAVASCRIPT es el siguiente

  function validate(){
  var ci_cliente = document.getElementById('ci_cliente').value;

  var ci_clienteRGEX = /^[V,J,G,E]{1}[-][0-9]{7,9}$/;

  var ci_clienteResult = ci_clienteRGEX.test(ci_cliente);

  if(ci_clienteResult == false)
  {
    alertify.error('Verifique el numero de Cliente');
    return false;
  } else
{
  return true;
}

}

  function validarFormVacio(formulario){
      datos=$('#' + formulario).serialize();
      d=datos.split('&');
      vacios=0;
      for(i=0;i< d.length;i++){
          controles=d[i].split("=");
          if(controles[1]=="A" || controles[1]==""){
            vacios++;
          }
      }
      return vacios;
    }



    $(document).ready(function(){
        $('#btnAgregarnuevo').click(function(){
      vacios=validarFormVacio('frmnuevo');
            if(vacios > 0){
                alertify.error("<i class='fa fa-ban'></i> Debes llenar todos los campos!!");
                return false;
            }

            datos=$('#frmnuevo').serialize();
validate(datos);

            $.ajax({
                type:"POST",
                data:datos,
                url:"../procesos/gestion/agregar.php",
                success:function(r){
                    if(r==1){
                        $('#frmnuevo')[0].reset();
            $('#resumengestion').load('../resumengestion.php');
                        $('#tablaDatatable').load('../tablagestion');
                        alertify.success("<i class='fa fa-check-circle'></i>Agregado con exito :D");
                    }else{
                        alertify.error("<i class='fa fa-ban'></i>Fallo al agregar :(");
                    }
                }
            });
        });

Asi como esta no envia si el input esta vacio, pero no he logrado hacer funcionar la function validate() da la alerta de que no se cumple la condicion pero igual manda el dato..!

7
  • 1
    Tienes que hacer un preventDefault() del botón para evitar que se procese el evento asociado
    – user128299
    Commented el 26 jul. 2020 a las 3:36
  • Independientemente de lo que pase en el navegador (javascript) debes validar los datos en el servidor.
    – Triby
    Commented el 26 jul. 2020 a las 3:44
  • Gracias, Si correcto pero de hecho hago un if isnull en mi php url:"../procesos/gestion/agregar.php", e igual los datos null recibidos del modal son procesados. @BetaM Voy a buscar eso de preventDefault() a ver que tal me va. Commented el 26 jul. 2020 a las 3:47
  • @JoseMHerreraV aqui tienes una respuesta de como usarlo: es.stackoverflow.com/questions/371607/…
    – user128299
    Commented el 26 jul. 2020 a las 3:53
  • Intente sin exito haciendo esto $(document).ready(function(){ $('#btnAgregarnuevo').click(function(e){ e.preventDefault(); datos=$('#frmnuevo').serialize(); $.ajax({ type:"POST", data:datos, url:"../procesos/gestion/agregar.php", success:function(r){ Commented el 26 jul. 2020 a las 4:32

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.