Validación de jQuery – si la tabla está vacía.
Cómo agregar validación a un formulario que verificará si la tabla está vacía. Si está vacía, quiero que la validación funcione para todos los campos, pero si agrego alguna fila a la tabla, la validación no debería verificar los campos del formulario. Busqué durante mucho tiempo, pero no encontré ninguna solución.
Mi código es el siguiente:
HTML:
<form id="NewWorkoutForm">
<div class="modal-body">
<h5 style="color:#ff6347">Szczegóły treningu</h5>
<hr>
<div class="row">
<input type="hidden" id="WorkoutID">
<div class="col-12">
<label for="workoutName" class="control-label pb-2">
Nazwa treningu
</label>
<div class="col-lg-7 col-md-10">
<input type="text" id="workoutName" name="workoutName" placeholder="" class="form-control">
</div>
</div>
</div>
<h5 style="margin-top:10px;color:#ff6347">Szczegóły ćwiczenia</h5>
<hr>
<div class="form-horizontal">
<div class="row">
<div class="col-lg-7 col-md-10">
<label for="exerciseName" class="control-label pb-2">
Nazwa ćwiczenia
</label>
<input type="text" id="exerciseName" name="exerciseName" placeholder="" class="form-control">
</div>
<div class="col-lg-3 col-md-4">
<label for="numberOfRepetitions" class="control-label pb-2">
Liczba powtórzeń
</label>
<input type="text" id="numberOfRepetitions" name="numberOfRepetitions" placeholder="" class="form-control">
</div>
<div class="col-lg-2 col-md-4">
<label for="weight" class="control-label pb-2">
Ciężar (kg)
</label>
<input type="text" id="weight" name="weight" placeholder="" class="form-control">
</div>
</div>
<div class="row pt-3 pb-3">
<div class="col-md-4 col-lg-offset-4">
<a id="addToList" class="btn btn-sm btn-primary">Dodaj do listy</a>
</div>
</div>
<table id="detailsTable" class="table">
<thead>
<tr>
<th style="width:40%">Nazwa ćwiczenia</th>
<th style="width:15%">Liczba powtórzeń</th>
<th style="width:15%">Ciężar</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Zamknij</button>
<input class="submit btn btn-success" type="submit" value="Zapisz trening">
</div>
</form>
JQuery:
$(function validar() {
$("#NewWorkoutForm").validate({
rules: {
workoutName: {
required: true
},
exerciseName: {
required: true
},
numberOfRepetitions: {
required: true,
number: true
},
weight: {
required: true,
number: true
}
},
messages: {
workoutName: {
required: "Por favor, ingrese el nombre del entrenamiento"
},
exerciseName: {
required: "Por favor, ingrese el nombre del ejercicio"
},
numberOfRepetitions: {
required: "Por favor, ingrese la cantidad de repeticiones",
number: "Ingrese un valor numérico"
},
weight: {
required: "Por favor, ingrese el peso",
number: "Ingrese un valor numérico"
}
},
submitHandler: function (form) {
save();
}
});
});
davy.ai
Para agregar validación al formulario que verifique si la tabla está vacía o no, se puede usar la propiedad
depends
de jQuery validate. Primero, agregue una clase vacía llamadarequiredIfTableEmpty
a todos los campos que deben ser obligatorios cuando la tabla está vacía. Luego, modifique el objetorules
en el código de jQuery para incluir una nueva regla para cada uno de estos campos, de la siguiente manera:Aquí, la función
depends
verifica si el número de filas en el cuerpo de la tabla es igual a cero. Si lo es, entonces se aplica la regla y el campo es obligatorio.A continuación, modifique el objeto
messages
para incluir mensajes de error personalizados para estos campos:Finalmente, agregue un event listener al botón
addToList
que elimina la claserequiredIfTableEmpty
de todos los campos cuando se agrega una nueva fila a la tabla:Esto eliminará la clase de todos los campos que la tengan, haciéndolos no obligatorios una vez que se ha agregado una fila a la tabla.