Jquery 验证 - 如果表为空

Posted 2023-05-07

【中文标题】Jquery 验证 - 如果表为空

【英文标题】：Jquery validate - if table is empty

【发布时间】：2022-01-07 02:39:16

【问题描述】：

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

我的代码在下面

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();
                
            
        );

【问题讨论】：

是的，我发现的所有方法都不适合我

您在文档中的哪里看到了表格单元格？ jqueryvalidation.org

也许我们弄错了，我不是要验证表格单元格，而是要在表格中有内容时禁用表单验证（文本字段）

【参考方案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();
            
        );
      

【讨论】：

这不是.validate() 方法的使用方式。这不是验证的触发器。这是初始化。您编写该代码的方式是初始化验证，然后一旦初始化，它就会保持初始化状态。根据 OP 的问题，这不是一个可行的解决方案。

好的。那么锻炼名称： 必需： 依赖：函数（） var tbody = $("#detailsTable tbody");返回 tbody.children().length == 0; ,