Jquery validate - if table is empty

Question

how to add validation to a form that will check the table if it is empty? If it is empty, I want the validation to work for all fields, but if I add any row to the table, the validation should not check the form fields. I searched for a long time but none of the solutions I found.

My code is below

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 validate() {

        $("#NewWorkoutForm").validate({
            rules: {
                workoutName: {
                    required: true                        
                },
                exerciseName: {
                    required: true
                },
                numberOfRepetitions: {
                    required: true,
                    number: true
                },
                weight: {
                    required: true,
                    number: true
                }                    
            },
            messages: {
                workoutName: {
                    required: "Proszę podać nazwę treningu"                       
                },
                exerciseName: {
                    required: "Proszę podać nazwę ćwiczenia"                       
                },
                numberOfRepetitions: {
                    required: "Proszę podać liczbę powtórzeń",
                    number: "Proszę podać wartość w liczbach"
                },
                weight: {
                    required: "Proszę podać wagę",
                    number: "Proszę podać wartość w liczbach"
                }
            },
            submitHandler: function (form) {
                save();
                
            }
        });

Answer 1

To check if the table is empty or not:

var checkTableBody = $("#Table1 tbody").html()

if(!checkTableBody) {
    // do something...
}

So your code would be:

$(function validate() {

      if(!$("#Table1 tbody").html()) {

         $("#NewWorkoutForm").validate({
            rules: {
                workoutName: {
                    required: true                        
                },
                exerciseName: {
                    required: true
                },
                numberOfRepetitions: {
                    required: true,
                    number: true
                },
                weight: {
                    required: true,
                    number: true
                }                    
            },
            messages: {
                workoutName: {
                    required: "Proszę podać nazwę treningu"                       
                },
                exerciseName: {
                    required: "Proszę podać nazwę ćwiczenia"                       
                },
                numberOfRepetitions: {
                    required: "Proszę podać liczbę powtórzeń",
                    number: "Proszę podać wartość w liczbach"
                },
                weight: {
                    required: "Proszę podać wagę",
                    number: "Proszę podać wartość w liczbach"
                }
            },
            submitHandler: function (form) {
                save();
            }
        });
      }