Jquery validate-如果表为空

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