如何在 jquery 中验证动态日期选择器.验证()?

Question

我正在尝试在数据库中插入动态日期选择器。一切正常！除了jquery .validation。完成验证规则 如果输入字段为空，则应显示必填消息，例如"请选择一个日期"：如果我添加三个动态行，同时将其保留为空并按下提交按钮，它将验证消息显示为"请选择日期" 现在移至三行！

a(在第一行我选择了一个日期，然后我按下了提交按钮，它在其余输入字段中显示"请选择一个日期">

b(然后接下来我在第二个输入字段中选择一个日期，然后按提交按钮，在这里需要发生的是第三个输入字段显示验证消息，但日期选择器会自动显示在第二个输入字段中。我不知道为什么在第二个输入字段中自动显示日期选择器，而它已经选择了日期......

<div class="form-body pal">
<div class="col-md-12 col-md-offset-10">
<div class="form-group">
<button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button>    //class name used for onclick to add row
</div>
</div>
</div>  
<div class="form-body pal">
<div class="col-md-12">
<div class="form-group">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover add_row" id="details">
<thead>
<tr>
<th >Date</th>
<th >Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
$(document).ready(function() {
// Append table with add row form on add new button click
$(".add_details_button").click(function(){    //button click to add row
var index = $("#details").index();    
var randaom_val = Math.floor(Math.random() * 100000000)    //Generating unique key for the added row
var row_index = index+randaom_val;
var row = '<tr>' +
'<td><input class="datepicker_recurring_start" name="date[]" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date"  class="form-control"/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>'
$("#details").append(row);
$(".datepicker_recurring_start").datepicker({
autoclose: true
})
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
});
});
//Jquery Validation
$(function() {
$("#add_date_form").validate( {
// Rules for form validation
rules: {
'date[]': {
required: true,
},
},
// Messages for form validation
messages: {
'date[]': {
required: 'Select a valid visit date'
},
},
// Do not change code below
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(form) {
var details_row_count = $('#details tr').length;
if (details_row_count<=1) {
var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...';
$.notific8(msg,{ theme: 'ruby',life: 500 });
return false;
}
$('#submit_date').attr("disabled", true);
form.submit();                
}
});
});

Answer 1

$(document).ready(function() {
var count=0;
// Append table with add row form on add new button click
$(".add_details_button").click(function(){    //button click to add row
var index = $("#details").index();    
var randaom_val = Math.floor(Math.random() * 100000000)    //Generating unique key for the added row
var row_index = index+randaom_val;
var row = '<tr>' +
'<td><input class="datepicker_recurring_start" name="dateField['+count+']" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date"  class="form-control" required/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>';
count=count+1;
$("#details").append(row);
$(".datepicker_recurring_start").datepicker({
autoclose: true
});
});
// Delete row on delete button click
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
});
});
//Jquery Validation
$(function() {
$("#add_date_form").validate();
$("#add_date_form").validate( {
// Rules for form validation

// Messages for form validation
messages: {
'dateField[]': {
required: 'Select a valid visit date'
},
},
// Do not change code below
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(form) {
var details_row_count = $('#details tr').length;
if (details_row_count<=1) {
var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...';
$.notific8(msg,{ theme: 'ruby',life: 500 });
return false;
}
$('#submit_date').attr("disabled", true);
form.submit();                
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<form name="add_date_form" id="add_date_form" method="POST" autocomplete="off" class="form-separated">
<div class="form-body pal">
<div class="col-md-12 col-md-offset-10">
<div class="form-group">
<button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button>
</div>
</div>
</div>  
<div class="form-body pal">
<div class="col-md-12">
<div class="form-group">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover add_row" id="details">
<thead>
<tr>
<th >Date</th>
<th >Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="form-body pal">
<div class="col-md-10 col-md-offset-10">
<div class="form-group">
<button type="submit" name="submit_date" id="submit_date" class="btn btn-primary submit"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
</div>
</form>

如果创建同名输入将不起作用

<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />

取而代之的是这个

<input type="text" name="date[0]" />
<input type="text" name="date[1]" />
<input type="text" name="date[2]" />
<input type="text" name="date[3]" />

只需为每个输入添加索引

并在验证器中编写规则，用于dateField[]或在输入标记中包含required属性。

我希望这对你有帮助。