bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無(wú)法正常觸發(fā)校驗(yàn)的解決思路

更新時(shí)間：2016年09月28日 10:27:09 作者：弓長(zhǎng)步又

這篇文章主要介紹了bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無(wú)法正常觸發(fā)校驗(yàn)的解決思路的相關(guān)資料,需要的朋友可以參考下

一、前言

使用bootstrap-datepicker和bootstrapValidator也有一段時(shí)間了，在工作中發(fā)現(xiàn)兩者同時(shí)使用時(shí)會(huì)出現(xiàn)的一種問(wèn)題，當(dāng)選擇完日期后，并不會(huì)正確校驗(yàn)該字段。為了更加直觀的展現(xiàn)問(wèn)題，上圖一張。

可以看出，當(dāng)選擇完日期后，校驗(yàn)結(jié)果并沒(méi)有達(dá)到預(yù)期，是因?yàn)閎ootstrapValidator插件默認(rèn)情況下，不會(huì)重復(fù)校驗(yàn)一個(gè)已經(jīng)標(biāo)記為驗(yàn)證通過(guò)或驗(yàn)證不通過(guò)的字段。so ，當(dāng)開(kāi)始觸發(fā)校驗(yàn)后，沒(méi)有通過(guò)校驗(yàn)，當(dāng)正確選擇日期后，并不會(huì)刷新校驗(yàn)結(jié)果，就會(huì)導(dǎo)致數(shù)據(jù)無(wú)法正常提交，當(dāng)手動(dòng)把日期改變后，會(huì)發(fā)現(xiàn)校驗(yàn)被正確觸發(fā)了?，F(xiàn)在就說(shuō)解決方法。

二、問(wèn)題解決

根據(jù)應(yīng)用場(chǎng)景分析，當(dāng)日期選擇插件關(guān)閉時(shí)，期望能夠觸發(fā)校驗(yàn)。所以使用bootstrap-datepicker的hide方法。當(dāng)日期選擇框關(guān)閉時(shí)，執(zhí)行刷新校驗(yàn)。先貼代碼再解釋：

/* 加載時(shí)間選擇插件 */ 
$("#companyRegisteTime").datepicker({ 
todayBtn : "linked", 
autoclose : true, 
todayHighlight : true, 
endDate : new Date() 
}).on('hide',function(e) { 
$('#enterpriseInfoForm').data('bootstrapValidator') 
.updateStatus('companyRegisteTime', 'NOT_VALIDATED',null) 
.validateField('companyRegisteTime'); 
});

updateStatus方法的作用是更新給定字段的校驗(yàn)狀態(tài)，官方介紹如下：

validateField方法的作用是觸發(fā)給定字段的校驗(yàn)

boostrapValidator官方文檔地址：http://bv.doc.javake.cn/api/

bootstrap-datepicker文檔地址：http://bootstrap-datepicker.readthedocs.io/en/latest/

三、完整示例

1、JSP中

<form method="post" action="${ctx }/corp/enterpriseInfo/saveCorpInfo.htm" enctype="multipart/form-data" id="enterpriseInfoForm" name="enterpriseInfoForm"> 
<div class="col-md-5 col-md-offset-1 mar-top"> 
<div class="form-horizontal"> 
<div class="form-group"> 
<label class="col-md-3 control-label">公司注冊(cè)時(shí)間：</label> 
<div class="col-md-9"> 
<input type="text" class="form-control" id="companyRegisteTime" name="companyRegisteTime" value="${corpInfo.companyRegisteTime }"> 
</div> 
</div> 
</div> 
</div> 
</form>

2、js中初始化

<span style="font-size:18px;">$('#enterpriseInfoForm').bootstrapValidator({ 
message : '該值無(wú)效', 
feedbackIcons : faIcon, 
excluded : ':disabled', 
fields : { 
companyRegisteTime : { 
message : '企業(yè)注冊(cè)時(shí)間無(wú)效', 
validators : { 
notEmpty : { 
message : '企業(yè)注冊(cè)時(shí)間不能為空' 
}, 
date : { 
format : 'YYYY/MM/DD', 
message : '日期格式不正確' 
} 
} 
} 
} 
});</span>

效果展示

以上所述是小編給大家介紹的bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無(wú)法正常觸發(fā)校驗(yàn)的解決思路，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: