Bootstrap DatePicker and Bootstrapvalidator in the same time when the selection of the date does not normally trigger the calibration of the solution idea _javascript skills

First, the preface

With Bootstrap-datepicker and Bootstrapvalidator for a while, you'll find a problem when you work with both, and you won't be able to verify the field correctly when you finish selecting the date. For a more intuitive display of the problem, a picture above.

As you can see, when the date is selected, the checksum is not up to expectations because the Bootstrapvalidator plug-in by default does not duplicate a field that has been marked for validation through or validation. So, when the start of the trigger check, does not pass the checksum, when the correct selection date, does not refresh the checksum results, will result in the data can not be submitted, when manually changed the date, you will find that the checksum is correctly triggered. Let's talk about the solution now.

Ii. Problem-solving

According to the application scenario analysis, when the date selection plugin is closed, expect to trigger the checksum. So use the Bootstrap-datepicker hide method. Performs a refresh checksum when the date selection box is closed. First paste the code and explain:

/* Load Time Select Plug-in 
/$ ("#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 '); 

The purpose of the UpdateStatus method is to update the checksum status of a given field, as the official introduction reads:

The purpose of the Validatefield method is to trigger a checksum for a given field

Boostrapvalidator Official document Address: http://bv.doc.javake.cn/api/

Bootstrap-datepicker Document Address: http://bootstrap-datepicker.readthedocs.io/en/latest/

Third, complete example

1, in the 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 "> Company Registration Time:</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. Initialization in JS

<span style= "FONT-SIZE:18PX;" >$ (' #enterpriseInfoForm '). Bootstrapvalidator ({message 
: ' This value is invalid ', 
Feedbackicons:faicon, 
excluded: ') :d isabled ', 
fields: { 
companyregistetime: {message 
: ' Invalid Enterprise registration time ', 
validators: { 
notempty: 
{ Message: ' Enterprise registration time cannot be empty '} 
, 
Date: { 
format: ' YYYY/MM/DD ', message 
: ' Date format is incorrect ' 
}} 
} 
}); </span>

Effect Show

The above is a small set to introduce the bootstrap DatePicker and Bootstrapvalidator at the same time when the selection date can not normally trigger the calibration of the solution, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!