更改-BootStrap
在提交表单时，日期选择器字段会进行验证并突出显示它是强制性的。但是即使从选择器中选择了日期，验证也不会消失。该字段仍以红色突出显示，并阻止表单提交。
这是我尝试使用on change函数重新验证的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 个答案:
答案 0 :(得分：0)
与您的代码有关的问题是验证需要使用“ DD / MM / YYYY”格式。
请更改日期选择器的格式，它将起作用。另外，您还需要添加代码中缺少的form标记。并通过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 -->
希望这可以解决问题。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？