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.
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');
}
}
});
}