1

Tengo una tabla donde genero las filas de manera dinámica por medio de JavaScript, dentro de cada fila hay 2 input y 2 select que debo validar si están vacíos o no antes de dar click en botón de guardar.

Cómo podria validar que los campos no estén vacíos y solo permita cuando estan con datos.

introducir la descripción de la imagen aquí

Este es mi HMTL, donde a la tabla con id="list-activities" le voy agregando las filas dinámicamente con JavaScript, cuando doy click a un botón me genera todas las filas.

<div id="PageLoadProgresAct" class="p-2 mb-2" style="display:none;margin:0 auto;width:120px;border:#014c8d 1px solid;background-color:#eeeeee"><img src="{{asset('images/gif/Progress-circle.gif')}}" alt="Progress"><span class="ml-1" style="color: #0069A5;font-size:12.5px">Cargando...</span></div>
                        <div class="mb-3 col-12 table-responsive">                        
                            <table class="table table-bordered table-hover text-center">
                                <thead style="color:#ffffff; background-color: rgb(33,136,201)">
                                    <tr>
                                        <th class="align-text-top text-sm" scope="col">Item</th>
                                        <th class="align-text-top text-sm" scope="col">Actividad</th>
                                        <th class="align-text-top text-sm" scope="col">Etapa Fabricación</th>
                                        <th class="align-text-top text-sm" scope="col">Prioridad</th>
                                        <th class="align-text-top text-sm" scope="col">Fec.Inicio</th>
                                        <th class="align-text-top text-sm" scope="col">Fin.Previsto</th>
                                        <th class="align-text-top text-sm" scope="col">Estado</th>
                                        <th class="align-text-top text-sm" scope="col"><i class="fas fa-trash-alt"></th>
                                    </tr>
                                </thead>
                                <tbody class="text-sm" id="list-activities">
                                    <tr id="nodataActivity">
                                        <td colspan="12">No hay datos ingresados...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

Este es mi código Javascript donde genera las filas cuando doy click en un botón aparte del formulario.

Al generar las filas las columnas Etapa, prioridad, fecha de inicio y fecha prevista están vacíos donde el usuarios ingresara datos y quisiera poder validar que cuando de click no permita si están vacíos.

function add_total_activity() {

    let tableBodyAT = document.getElementById('listActivities');
    let tableBodyA = document.getElementById('list-activities');

    for (let i = 0, row; row = tableBodyAT.rows[i]; i++) {
        for (let j = 0, col; col = row.cells[j]; j++) {
            c_activity++;
            $('#nodataActivity').remove();
            let newRow = tableBodyA.insertRow(-1);
            let count = tableBodyA.rows.length;
            newRow.innerHTML = '<th scope="row" style="font-size:12px">' + count + '</th><input type="hidden" value="' + c_activity + '"><td style="font-size:12px" class="fw-bold name name_activity_n">' + col.innerText + '</td><td><select style="font-size:12px" class="form-control form-control-sm text-center fw-bold stage_id_n" name="stage_id"><option value="">Seleccionar...</option><option value="1">Acondicionamiento de materiales</option><option value="2">Trabajo de Ensamblaje</option><option value="3">Trabajo de Soldadura</option><option value="4">Prueba Hidrostatica/Hermeticidad</option><option value="5">Trabajo de Acabados/Limpieza</option></td><td><select style="font-size:12px" class="form-control form-control-sm text-center fw-bold priority_n" name="priority"><option value="">Seleccionar...</option><option value="Crítica">Crítica</option><option value="Alta">Alta</option><option value="Media">Media</option><option value="Baja">Baja</option></select></td><td><input type="date" style="font-size:12px" class="form-control form-control-sm form-control-plaintext fw-bold text-center bg-light start_date_n" name="start_date" value=""></td><td><input type="date" style="font-size:12px" class="form-control form-control-sm form-control-plaintext fw-bold text-center bg-light expected_date_n" name="expected_date" value=""></td><td><select style="font-size:12px" class="form-control form-control-sm bg-white fw-bold text-center status_activity_n" disabled name="status_activity"><option value="1" selected>Asignado</option></select></td><td><button class="btn btn-sm btn-danger" onclick="delete_row_project_activity(this)"><i class="fas fa-trash-alt"></i></button></td>';
        }
    }
}

Esta es la función donde hago el guardado de los datos enviando por AJAX a mi controller.

function store_activities() {
    c_activity = 0;
    document.querySelectorAll('#list-activities tr').forEach(function (e) {
        c_activity++;
        let object = {
            c_activity: c_activity,
            name: e.querySelector('.name_activity_n').innerHTML,
            priority: e.querySelector('.priority_n').value,
            start_date: e.querySelector('.start_date_n').value,
            expected_date: e.querySelector('.expected_date_n').value,
            stage_id: e.querySelector('.stage_id_n').value,
            status: e.querySelector('.status_activity_n').value,
            project_id: document.getElementById('project_id').value
        };
        
        actividades.push(object);
       
    });
    console.log(actividades); 
   
    let objetos = JSON.stringify(actividades);

    $.ajax({
        method: 'POST',
        url: '/activity/store',
        data: { objetos: objetos },
        statusCode: {
            200: function (response) {
                console.log(response);
                $('#project-activities-modal').modal('hide');
                limpiar();
                Swal.fire(
                    'Bien hecho!',
                    response['message'],
                    'success'
                ).then(function () {
                    actividades = [];
                    tableProject.ajax.reload();
                });
            },
            500: function () {
                console.log('Error');
            }
        }
    });
}
2
  • se deben validar todos los elementos de tabla? podrias colocar el codigo html de tu tabla ya renderizada en el doom para ver los inputs y los names que tienen estos?
    – Bryro
    Commented el 27 may. 2023 a las 22:04
  • Claro ahora edito y lo armó ya con la estructura que se tiene al final y si debería validar cada input de cada fila no esté vacío Commented el 27 may. 2023 a las 22:33

2 respuestas 2

0

Puedes agregar una clase compartida a todos los elementos que quieres validar y ejecutar una función al hacer click en el botón. El script se detendrá y enfocará el primer elemento que encuentre vacío.

Reemplaza el alert por las funciones que envían la petición para guardar cuando se cumpla que no hayan campos vacíos.

$('#validarVacios').on('click', function() {
  //Contar los campos que comparten clase
  let cantidad = $('.validar').length;
  //Inicializar un contador
  let contador = 0;
  //Marcar con borde rojo todos los vacíos
  $('.validar').each(function() {
    if ($(this).val() === '') {
      $(this).addClass('border-danger');
    } else {
      $(this).removeClass('border-danger');
    }
  });
  //Hacer foco en el primer vacío
  $('.validar').each(function() {
    if ($(this).val() === '') {
      $(this).focus();
      return false;
    }
    contador++;
  });
  //Validar que no hayan vacíos
  if(cantidad === contador){
    //Guardar cuando se cumpla
    alert('No hay vacíos!');
  }
});
.border-danger{
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="validar">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="validar">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td><input type="date" class="validar"></td>
    <td><input type="date" class="validar"></td>
  </tr>
  <tr>
    <td>
      <select class="validar">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td>
      <select class="validar">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td><input type="date" class="validar"></td>
    <td><input type="date" class="validar"></td>
  </tr>
</table>
<button id="validarVacios">AGREGAR</button>

Ten en cuenta que los script siempre van al final del documento, antes del cierre de la etiqueta </body>.

4
  • DjCrazy, gracias estuve probando el codigo y se coloca el foco en el campo donde este vacio. Adicional a eso agregue un clase para que se ponga el campo de color rojo; pero como podria hacer para que todos los campos se coloquen del color rojo y no solo quede en el primer input vacio. Commented el 28 may. 2023 a las 16:20
  • let cantidad = $('.validarRow').length; let contador = 0; $('.validarRow').each(function () { if ($(this).val() === '') { $(this).focus(); $(this).addClass('border'); $(this).addClass('border-danger'); return false; } else{ $(this).removeClass('border'); $(this).removeClass('border-danger'); } contador++; }); if (cantidad === contador) { alert('No hay vacíos!'); } Commented el 28 may. 2023 a las 16:21
  • Se me ocurre rápidamente agregar un nuevo ciclo para maracar en rojo todos los campos vacíos y posteriormente el otro ciclo para enfocar el primer vacío. Edite la respuesta con el nuevo ciclo y con el CSS.
    – DjCrazy
    Commented el 28 may. 2023 a las 16:39
  • 1
    Muchas, gracias me ayudo mucho, anteriormente solo habia realizado con queryselectall recorria la tabla y sus filas, pero cuando aplicaba querySelector('validar') con la clase, solo me marcaba la primera fila y no las demás. Commented el 28 may. 2023 a las 16:52
0

Una fila se considera no vacía cuando tiene definidos los valores para etapa, prioridad, fecha inicio y fecha término. Podemos definir una función isRowComplete que recibe un elemento tr y devuelve verdadero o falso.

function isRowComplete(row) {
  const {
    priority: e.querySelector('.priority_n').value,
    start_date: e.querySelector('.start_date_n').value,
    expected_date: e.querySelector('.expected_date_n').value,
    stage_id: e.querySelector('.stage_id_n').value
  };
  return priority && start_date && expected_date && stage_id
}

Luego antes de tu llamada ajax puedes contar cuántas filas están incompletas, y retornar cuando no sean cero:

function store_activities() {

   const filas_incompletas = Array.from(
       document.querySelectorAll('#list-activities tr')
    ).filter(tr => !isRowComplete(tr)).length;

    if(filas_incompletas!==0) return;
    c_activity = 0;
    ....
 }

te queda de tarea mostrar algún mensaje informativo en vez de sólo retornar

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.