Solve the problem that the validation cannot be triggered normally after a date is selected when bootstrap datepicker and bootstrapValidator are used at the same time. bootstrapvalidator

Solve the problem that the validation cannot be triggered normally after a date is selected when bootstrap datepicker and bootstrapValidator are used at the same time. bootstrapvalidator

I. Preface

You have been using bootstrap-datepicker and bootstrapValidator for some time. During work, you may find a problem when both of them are used at the same time. After you select a date, this field will not be correctly verified. To display problems more intuitively.

It can be seen that after the date is selected, the verification result is not as expected because the bootstrapValidator plug-in does not repeat a field marked as verified or not verified by default. So, when verification is triggered, the verification fails. When the date is selected correctly, the verification result is not refreshed, and the data cannot be submitted normally. When the date is changed manually, check is correctly triggered. Now let's talk about the solution.

Ii. Problem Solving

Based on the analysis of application scenarios, when the plug-in is disabled by date, verification is expected to be triggered. Therefore, use the bootstrap-datepicker hide method. When the date selection box is closed, refresh the verification. Paste the code first and then explain:

/* Select plug-in loading time */$ ("# 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 updateStatus method updates the validation status of a specified field. The official introduction is as follows:

The validateField method is used to trigger validation of a specified field.

BoostrapValidator official documentation at: http://bv.doc.javake.cn/api/

Bootstrap-datepicker document address: http://bootstrap-datepicker.readthedocs.io/en/latest/

Iii. Complete example

1. JSP

<Form method = "post" action = "$ {ctx}/corp/iseiseinfo/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> </form>

2. js Initialization

<Span style = "font-size: 18px;"> $ ('# enterpriseInfoForm '). bootstrapValidator ({message: 'invalid value ', feedbackIcons: faIcon, excluded:': disabled ', fields: {companyRegisteTime: {message: 'invalid enterprise registration time', validators: {notEmpty: {message: 'enterprise registration time cannot be blank '}, date: {format: 'yyyy/MM/dd', message: 'date format incorrect '}}}}); </span>

Effect display

The above is a solution to the problem that bootstrap datepicker and bootstrapValidator cannot trigger verification normally after a date is selected for use at the same time. I hope this will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!