Use the bootstrapValidator plug-in to dynamically add and verify form elements, and use bootstrap to verify the form.

Use the bootstrapValidator plug-in to dynamically add and verify form elements, and use bootstrap to verify the form.

I. Preface

In practice, to dynamically add form elements, and use the bootstrapValidator plug-in to perform foreground verification on Dynamically added form elements. In the previous work, bootstrapValidator was used to verify the form elements, but the elements involved in the form are fixed. Therefore, during page loading, the form elements can be initialized. Although the idea is clear, I am not familiar with the use of bootstrapValidator. I am wasting a lot of time on this issue. Now I will post the solution and functions to help you.

Idea: dynamically add form elements, call the bootstrapValidator method to add verification rules to the form, and call the addField () method to implement the function.

After finding the relevant method on the Internet for a long time, you can go to the following: Workshop... Later, I wasted a lot of time trying to use it.

In despair, I accidentally saw this kind of usage. I tried it and it was successful.

Ii. Function Diagram

This figure shows the page initialization result. The form elements are fixed and the verification is added to the ready method. paste the code later.

Yes. Click the Add button to dynamically add form elements and add validation rules to the elements.

Iii. Code

Click the Add button to add elements and verify the elements.

// List-Add button $ ("# menuAdd "). click (function () {var n = $ (". cy-list-content "). length + 1; var oDiv =$ ('<div> </div>'); oDiv. addClass ("cy-list-content "); oDiv.html ('
Initialize bootstrapValidator. You can see that no 4th rows are initialized here.
/* Push content validation */$ ("# contentInfoForm "). bootstrapValidator ({message: 'invalid value ', feedbackIcons: faIcon, // excluded:': disabled ', fields: {'pushmenu [0]. text': {message: 'invalid pop-up content ', validators: {notEmpty: {message: 'pop-up content cannot be blank' }}, 'pushmenu [0]. url ': {message: 'invalid URL', validators: {notEmpty: {message: 'url cannot be blank '}}, 'pushmenu [0]. smsNum ': {message: 'invalid business center number', validators: {notEmpty: {message: 'Business center number cannot be blank '}}, 'pushmenu [0]. smsOrder ': {message: 'invalid feedback Content Encoding', validators: {notEmpty: {message: 'feedback Content Encoding cannot be blank '}}, 'alphaid': {message: 'invalid list title', validators: {notEmpty: {message: 'list title' cannot be blank '}}, 'pushmenu [1]. text': {message: 'invalid pop-up content ', validators: {notEmpty: {message: 'pop-up content cannot be blank' }}, 'pushmenu [1]. url ': {message: 'invalid URL', validators: {notEmpty: {message: 'url cannot be blank '}}, 'pushmenu [1]. smsNum ': {message: 'invalid business center number', validators: {notEmpty: {message: 'Business center number cannot be blank '}}, 'pushmenu [1]. smsOrder ': {message: 'invalid feedback Content Encoding', validators: {notEmpty: {message: 'feedback Content Encoding cannot be blank '}}, 'pushmenu [2]. text': {message: 'invalid pop-up content ', validators: {notEmpty: {message: 'pop-up content cannot be blank' }}, 'pushmenu [2]. url ': {message: 'invalid URL', validators: {notEmpty: {message: 'url cannot be blank '}}, 'pushmenu [2]. smsNum ': {message: 'invalid business center number', validators: {notEmpty: {message: 'Business center number cannot be blank '}}, 'pushmenu [2]. smsOrder ': {message: 'invalid feedback Content Encoding', validators: {notEmpty: {message: 'feedback Content Encoding cannot be blank '}}, 'pushmenu [3]. text ': {message: 'invalid pop-up content', validators: {notEmpty: {message: 'pop-up content cannot be blank '}}}}});
Iv. Summary

AddField (field, options)
Parameters of the addField Method
Field is the name of the validation rule form element to be dynamically added, that is, pushMenu ['+ (n-1) +']. text in the example
Options is actually a validation rule. In the example, {validators: {notEmpty: {message: 'push service content cannot be blank '}}