更改后，日期选择器验证不起作用-BootStrap
Posted
技术标签:
【中文标题】更改后，日期选择器验证不起作用-BootStrap【英文标题】：Datepicker validation doesn't work after change-BootStrap 【发布时间】：2020-02-25 06:56:20 【问题描述】：在提交表单时，日期选择器字段验证并突出显示它是强制性的。但即使从选择器中选择了日期，验证也不会消失。该字段仍以红色突出显示并阻止表单提交。
这是我尝试使用更改功能重新验证的 JS：
function lpad(n, width, z)
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
function doSubmit()
$('#filterForm').bootstrapValidator('validate');
if ($('#filterForm').bootstrapValidator('isValid').has('.has-error').length == 0)
// Make the ajax call here.
var link = "[LL_REPTAG_URLPREFIXFULL /]?func=ll&objId=[LL_REPTAG_$MainReport /]&objAction=RunReport";
var datepicker_StartDate = $.trim($('#datepicker_StartDate').val());
var datepicker_EndDate = $.trim($('#datepicker_EndDate').val());
var resultStart = datepicker_StartDate.split("/");
var resultEnd = datepicker_EndDate.split("/");
var Start = resultStart[2] + "/" + resultStart[1] + "/" + resultStart[0];
var End = resultEnd[2] + "/" + resultEnd[1] + "/" + resultEnd[0]
var startdate = "D/" + Start + ":0:0:0"
var enddate = "D/" + End + ":23:59:59"
link = link + "&inputlabel1=" + startdate
link = link + "&inputlabel2=" + enddate
link = link + "&inputlabel3=" + $.trim($('#IncomingIAGRefno').val())
link = link + "&inputlabel4=" + $.trim($('#LetterRefno').val())
link = link + "&inputlabel5=" + $.trim($('#status').val())
document.location.href = link;
$(document).ready(function()
var sd = new Date();
sd.setDate(sd.getDate() - 30);
var dd = new Date();
$('#datepicker_StartDate').val(lpad(sd.getDate(), 2) + "/" + lpad(sd.getMonth() + 1, 2) + "/" + lpad(sd.getFullYear(), 4));
$('#datepicker_EndDate').val(lpad(lpad(dd.getDate(), 2) + "/" + lpad(dd.getMonth() + 1, 2) + "/" + +dd.getFullYear(), 4));
//Validataion Begins
$('#filterForm').bootstrapValidator(
// To use feedback icons, ensure to use Bootstrap v3.1.0 or later
feedbackIcons:
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
,
fields:
datepicker_StartDate:
validators:
stringLength:
min: 8,
,
notEmpty:
message: 'The Start Acceptance Date is required and cannot be empty'
,
date:
format: 'dd/mm/yyyy',
message: 'The format is dd/mm/yyyy'
,
datepicker_EndDate:
validators:
stringLength:
min: 8,
,
notEmpty:
message: 'The End Acceptance Date is required and cannot be empty'
);
$("#datepicker_StartDate").on('changeDate', function(e)
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_StartDate');
);
$("#datepicker_EndDate").on('changeDate', function(e)
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_EndDate');
);
);
$(function()
$("#datepicker_StartDate").datepicker();
$("#datepicker_EndDate").datepicker();
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<form class="well form-horizontal" id="filterForm" METHOD="post" ACTION="[LL_REPTAG_URLPREFIX /]">
<INPUT TYPE="hidden" NAME="func" VALUE="ll">
<INPUT TYPE="hidden" NAME="objId" VALUE="[LL_REPTAG_$MainReport /]">
<INPUT TYPE="hidden" NAME="objAction" VALUE="runreport">
<fieldset>
<legend>
<center>
<h4 style="font-family:arial black;color: #285a8b;"><b>Report</b></h4>
</center>
</legend><br>
<div class="form-group">
<label class="col-md-4 control-label">Start Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_StartDate" name="datepicker_StartDate" placeholder="Start Acceptance Date" class="form-control date-picker">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_EndDate" name="datepicker_EndDate" placeholder="End Acceptance Date" class="form-control">
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
              <button type="button" id="runReportButton" onclick="return doSubmit();" class="btn btn-warning">        SUBMIT <span class="glyphicon glyphicon-send"></span>        </button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /.container -->
</body>【问题讨论】：
【参考方案1】：您的代码存在问题，即验证需要“DD/MM/YYYY”格式。
请更改日期选择器格式，它将起作用。而且您还需要添加代码中缺少的表单标签。并形成 onsubmit 触发您的逻辑。请参阅下面的示例代码。
$(function()
$("#datepicker_StartDate").datepicker(
format: 'dd/mm/yyyy'
);
$("#datepicker_EndDate").datepicker(
format: 'dd/mm/yyyy'
);
)
完整的工作代码：
function lpad(n, width, z)
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
function doSubmit()
$('#filterForm').bootstrapValidator('validate');
if ($('#filterForm').bootstrapValidator('isValid').has('.has-error').length == 0)
// Make the ajax call here.
var link = "[LL_REPTAG_URLPREFIXFULL /]?func=ll&objId=[LL_REPTAG_$MainReport /]&objAction=RunReport";
var datepicker_StartDate = $.trim($('#datepicker_StartDate').val());
var datepicker_EndDate = $.trim($('#datepicker_EndDate').val());
var resultStart = datepicker_StartDate.split("/");
var resultEnd = datepicker_EndDate.split("/");
var Start = resultStart[2] + "/" + resultStart[1] + "/" + resultStart[0];
var End = resultEnd[2] + "/" + resultEnd[1] + "/" + resultEnd[0]
var startdate = "D/" + Start + ":0:0:0"
var enddate = "D/" + End + ":23:59:59"
link = link + "&inputlabel1=" + startdate
link = link + "&inputlabel2=" + enddate
link = link + "&inputlabel3=" + $.trim($('#IncomingIAGRefno').val())
link = link + "&inputlabel4=" + $.trim($('#LetterRefno').val())
link = link + "&inputlabel5=" + $.trim($('#status').val())
document.location.href = link;
$(document).ready(function()
var sd = new Date();
sd.setDate(sd.getDate() - 30);
var dd = new Date();
$('#datepicker_StartDate').val(lpad(sd.getDate(), 2) + "/" + lpad(sd.getMonth() + 1, 2) + "/" + lpad(sd.getFullYear(), 4));
$('#datepicker_EndDate').val(lpad(lpad(dd.getDate(), 2) + "/" + lpad(dd.getMonth() + 1, 2) + "/" + +dd.getFullYear(), 4));
//Validataion Begins
$('#filterForm').bootstrapValidator(
// To use feedback icons, ensure to use Bootstrap v3.1.0 or later
feedbackIcons:
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
,
fields:
datepicker_StartDate:
validators:
stringLength:
min: 8,
,
notEmpty:
message: 'The Start Acceptance Date is required and cannot be empty'
,
date:
format: 'DD/MM/YYYY',
message: 'The format is dd/mm/yyyy'
,
datepicker_EndDate:
validators:
stringLength:
min: 8,
,
notEmpty:
message: 'The End Acceptance Date is required and cannot be empty'
);
$("#datepicker_StartDate").on('changeDate', function(e)
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_StartDate');
);
$("#datepicker_EndDate").on('changeDate', function(e)
$('#filterForm').bootstrapValidator('revalidateField', 'datepicker_EndDate');
);
);
$(function()
$("#datepicker_StartDate").datepicker(
format: "dd/mm/yyyy"
);
$("#datepicker_EndDate").datepicker(
format: "dd/mm/yyyy"
);
); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="well form-horizontal" id="filterForm" METHOD="post" ACTION="[LL_REPTAG_URLPREFIX /]">
<INPUT TYPE="hidden" NAME="func" VALUE="ll">
<INPUT TYPE="hidden" NAME="objId" VALUE="[LL_REPTAG_$MainReport /]">
<INPUT TYPE="hidden" NAME="objAction" VALUE="runreport">
<fieldset>
<legend>
<center>
<h4 style="font-family:arial black;color: #285a8b;"><b>Report</b></h4>
</center>
</legend><br>
<div class="form-group">
<label class="col-md-4 control-label">Start Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_StartDate" name="datepicker_StartDate" placeholder="Start Acceptance Date" class="form-control date-picker">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End Acceptance Date</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" id="datepicker_EndDate" name="datepicker_EndDate" placeholder="End Acceptance Date" class="form-control">
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>               
<button type="button" id="runReportButton" onclick="return doSubmit();" class="btn btn-warning">        SUBMIT <span class="glyphicon glyphicon-send"></span>        </button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- /.container -->希望这能解决问题。
【讨论】：
嗨，我已经有了表单标签。请参阅上面编辑的帖子以获取完整的 html。我想在我的场景中使用 使用它来验证表单 onClick。我已更新代码，请再次检查代码。 ``` function doSubmit(event) $('#filterForm').bootstrapValidator('validate'); console.log("sdfds"); ``` 我也已经有了这条线 $('#filterForm').bootstrapValidator('validate');。请检查我上面的代码。仍然不起作用。 我为表单域设置了一些默认值。请删除默认值并尝试再次选择日期。选择后，仍然显示错误。 您必须将 datepicker 格式设置为 ' $("#datepicker_StartDate").datepicker( format: 'dd/mm/yyyy' );'。试试这个。以上是关于更改后，日期选择器验证不起作用-BootStrap的主要内容，如果未能解决你的问题，请参考以下文章