Mvc5 Jquery Validation Not Working on dynamic element

Question

AHSAN ALI 101

Jquery validation not working on dynamically appended select2 element User's image

User's image

SurferOnWww 4,951 Reputation points

2023-09-29T01:01:58.6433333+00:00

Please show the html source generated by the ASP.NET for the "dynamically appended select2 element".
Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-09-29T03:39:34.51+00:00
Hi @AHSAN ALI,

You only provided part of the code and we can't reproduce your issue. It's best to provide a minimal example that reproduces the problem.

From my understanding, Validation markup (span tags, custom field attributes, etc) are not rendered unless your fields are contained within a FORM. The validation plugin itself does not work with elements outside of a form.

You can refer to the following modular function：

function fnValidateDynamicContent(element) { var currForm = element.closest("form"); currForm.removeData("validator"); currForm.removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse(currForm); currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors. }

and call it like this:

fnValidateDynamicContent("#templateContainer")

Your answer

SurferOnWww 4,951 Reputation points

2023-09-29T01:01:58.6433333+00:00

Please show the html source generated by the ASP.NET for the "dynamically appended select2 element".
Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-09-29T03:39:34.51+00:00

Hi @AHSAN ALI,

You only provided part of the code and we can't reproduce your issue. It's best to provide a minimal example that reproduces the problem.

From my understanding, Validation markup (span tags, custom field attributes, etc) are not rendered unless your fields are contained within a FORM. The validation plugin itself does not work with elements outside of a form.

You can refer to the following modular function：

function fnValidateDynamicContent(element) { var currForm = element.closest("form"); currForm.removeData("validator"); currForm.removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse(currForm); currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors. }

and call it like this:

fnValidateDynamicContent("#templateContainer")