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

June 12, 2023 at 3:05 pm

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 llamada requiredIfTableEmpty a todos los campos que deben ser obligatorios cuando la tabla está vacía. Luego, modifique el objeto rules en el código de jQuery para incluir una nueva regla para cada uno de estos campos, de la siguiente manera:

rules: {
    workoutName: {
        required: true
    },
    exerciseName: {
        required: true
    },
    numberOfRepetitions: {
        required: {
            depends: function() {
                return $('#detailsTable tbody tr').length === 0;
            }
        },
        number: true
    },
    weight: {
        required: {
            depends: function() {
                return $('#detailsTable tbody tr').length === 0;
            }
        },
        number: true
    },
    // agregar una nueva regla para cada campo requiredIfTableEmpty
}

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:

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: 'Por favor, ingrese un valor numérico'
    },
    weight: {
        required: 'Por favor, ingrese el peso',
        number: 'Por favor, ingrese un valor numérico'
    },
    // agregar un nuevo mensaje para cada campo requiredIfTableEmpty
}

Finalmente, agregue un event listener al botón addToList que elimina la clase requiredIfTableEmpty de todos los campos cuando se agrega una nueva fila a la tabla:

$('#addToList').on('click', function() {
    if ($('#detailsTable tbody tr').length === 0) {
        $('.requiredIfTableEmpty').each(function() {
            $(this).removeClass('requiredIfTableEmpty');
        });
    }
});

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.

es.davy.ai

¿Tienes una pregunta?

Validación de jQuery – si la tabla está vacía.

Answer

davy.ai