Solution to the failure to submit jQuery Validation dynamic forms

Today, I am going to introduce you to a solution that cannot be submitted by jQuery Validation dynamic forms. I hope this tutorial will be helpful to you.

When jQuery Validation Plugin is used to verify the form, if Javascript is used to dynamically add an input or textarea form item to the form, it is found that the form cannot be submitted, and the newly added form item cannot pass verification, script Error.

The Form Verification plug-in version used is jQuery Validation Plugin 1.11.1.

The solution is to reset the verification rules if the content of the form changes. Example:

The Code is as follows:

Copy code

$ ("# Formid"). change (function (){ Var $ form = $ ("#" + formId ); Var validSetting = $ form. validate ({ ErrorElement: 'span ', ErrorClass: 'help-inline ', FocusInvalid: false, Ignore: ": hidden ", Rules :{ Email :{ Required: true, Email: true } }, ErrorPlacement: function (error, element) {// render error placement for each input type Error. insertAfter (element); // for other inputs, just perform default behavoir }, InvalidHandler: function (event, validator) {// display error alert on form submit }, Highlight: function (element ){ $ (Element). closest ('. help-inline'). removeClass (' OK '); // display OK icon $ (Element). closest ('. control-group'). removeClass ('success'). addClass ('error'); // set error class to the control group }, Unhighlight: function (element ){ $ (Element). closest ('. control-group'). removeClass ('error'); // set error class to the control group }, Success: function (label ){ Label. addClass ('valid '). addClass ('help-inline OK '). closest ('. control-group '). removeClass ('error '). addClass ('success '); } }); If (! $ Form. valid ()){ Return false; } $ Form. change (function () {// reset the verification rule when the form element changes ValidSetting. rules = rules; });