Use the Bootstrapvalidator plug-in to dynamically add form elements and verify _javascript tips

First, the preface

In practice, to achieve the dynamic increase of form elements, and use the Bootstrapvalidator plug-in for dynamically added form elements for the foreground check. Bootstrapvalidator has been used in previous work to validate form elements, but the form elements involved are fixed, so initializing the form elements when the page is loaded is possible. Although the idea is very clear, but because of the use of bootstrapvalidator unfamiliar, in this matter or waste a lot of time, now put the solution and the function of the picture posted, hope to help everyone.

Idea: Dynamically add form elements, and call the Bootstrapvalidator method to add a checksum rule to the form, call the AddField () method to implement the function

Search on the internet for a long time to find relevant methods, you can go to see: http://formvalidation.io/api/#add-field, here directly to the relevant content of the screenshot, to tell the truth I did not see too understand ... Then I wasted a lot of time trying to test how to use it.

In the despair of the occasional see this usage, it was tested, it was successful

Second, function diagram

This figure is the result of page initialization, the form element is fixed, and the checksum is added to the Ready method, and the code is later pasted

The following image is the effect of clicking the Add button to dynamically add a form element and adding a checksum rule to the element

Third, the Code

When you click the Add button, implement the add element and verify the element

List-New button $ ("#menuAdd"). Click (function () {var n=$ (". Cy-list-content"). length+1; 
var odiv=$ (' <div></div> '); 
Odiv.addclass ("Cy-list-content"); odiv.html ('  

Initializes the Bootstrapvalidator, and you can see that the 4th row is not initialized

/* Push content Checksum/$ ("#contentInfoForm"). Bootstrapvalidator ({message: ' This value is invalid ', Feedbackicons:faicon,//excluded: ':d isabl Ed ', fields: {' Pushmenu[0].text ': {message: ' Window contents invalid ', validators: {notempty: {message: ' Window contents cannot be empty '}} , ' Pushmenu[0].url ': {message: ' url not valid ', validators: {notempty: {message: ' URL cannot be empty '}}, ' Pushmenu[0].sm  Snum ': {message: ' Business center number is invalid ', validators: {notempty: {message: ' Business center number cannot be empty '}}, ' Pushmenu[0].smsorder ': {message: ' Feedback content encoding is invalid ', validators: {notempty: {message: ' Feedback content encoding cannot be empty '}}, ' Alphaid ': {message: ' list title No  Effect ', validators: {notempty: {message: ' list title cannot be empty '}}, ' Pushmenu[1].text ': {text: ' window content is invalid ', validators : {notempty: {message: ' the window contents cannot be empty '}}, ' Pushmenu[1].url ': {text: ' URL invalid ', validators: {notempty: 
{message: ' URL cannot be empty '}} }, ' Pushmenu[1].smsnum ': {message: ' Business center number is invalid ', validators: {notempty: {message: ' Business center number cannot be empty '}},
' Pushmenu[1].smsorder ': {message: ' Feedback content encoding is invalid ', validators: {notempty: {message: ' Feedback content encoding cannot be empty '}}, ' Pushm  
Enu[2].text ': {message: ' Window contents invalid ', validators: {notempty: {message: ' Window contents cannot be empty '}}, ' Pushmenu[2].url ': { Message: ' URL not valid ', validators: {notempty: {message: ' URL cannot be empty '}}, ' Pushmenu[2].smsnum ': {message: ' Business Invalid center number ', validators: {notempty: {message: ' Business center number cannot be empty '}}, ' Pushmenu[2].smsorder ': {message: ' Feedback content encoding invalid '  , validators: {notempty: {message: ' Feedback content encoding cannot be empty '}}}, ' Pushmenu[3].text ': {message: ' Window contents invalid ', validators  : {notempty: {message: ' Window contents cannot be empty '}}}};

Iv. Summary

AddField (field,options)

Parameters of the AddField method

field is to dynamically add the name of the validation rule form element, i.e. pushmenu[' + (n-1) + '].text in the example

Options are actually the validation rule that is the example {
validators: {notempty: {
message: ' Push business content cannot be empty '
}
}