Jquery 验证 - 如果表为空

Question

如何在表格中添加验证以检查表格是否为空？如果它为空，我希望验证适用于所有字段，但如果我向表中添加任何行，则验证不应该检查表单字段。找了半天也没找到解决办法。

我的代码在下面

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

检查表是否为空：

var tbody = $("#detailsTable tbody");

if(tbody.children().length == 0) {
    // do something...
}

所以你的代码是：

$(function validate() {

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

         $("#NewWorkoutForm").validate({
            rules: {
                workoutName: {
                    required: {
                       depends:function() {
                          var tbody = $("#detailsTable tbody");
                          return tbody.children().length == 0;
                       }
                    },
                },
                exerciseName: {
                    required: {
                       depends:function() {
                          var tbody = $("#detailsTable tbody");
                          return tbody.children().length == 0;
                       }
                    },
                },
                numberOfRepetitions: {
                    required: {
                       depends:function() {
                          var tbody = $("#detailsTable tbody");
                          return tbody.children().length == 0;
                       }
                    },
                },
                weight: {
                    required: {
                       depends:function() {
                          var tbody = $("#detailsTable tbody");
                          return tbody.children().length == 0;
                       }
                    },
                },                    
            },
            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();
            }
        });
      }