And here is the final solution. simple plugin to jQuery.
On the partial view use
Explanation - Unobtrusive validation in partial view
Unobtrusive validation is a great feature. You can easily bind your server side validation to client side validation provided by JQuery plugin.
Everything is fine but there is a small problem. When working with Partial views with form you need to load unobtrusive validation two times. First on when the main window is loaded and then the second time when the partial view is injected. Why ? Unobtrusive validation attaches special attributes to field on load event, which are used to bind your own rules defined inside the model with rules implementation provided by JQuery library.
When you create a partial view fields in new form are without those special attributes and so validation is not working.
One of the solution is to load unobtrusive .js file again. It works but you need to load something twice wasting resources.
Let’s find a better solution.
Scenario 1 - dynamic elements
Some googling / binging and I found this post
This solution is ok if you are adding dynamic element to a form with already attached validation attributes .
In my scenario with dynamic data in partial, I am creating new form waiting to be validated. So let’s look at the next solution.
Scenario 2 - new form (in partial view)
After a lot of research and debugging through the jQuery and MS validation plugin (at least I know in details how unobtrusive validation works ) . I noticed that unobtrusive creates special OnError method and overrides the default one ( which injects default label ) in the jQuery
Creating proxy with onError :
There is a method “parse” in unobtrusive plugin , which is responsible for creating validation attributes , adapters and also what’s really important errorPlacement adapter. Everything you need. Knowing all of this we can just use this “parse” on the form and everything should work fine.
Well there is a small problem. This won’t work because after a bit of analysis,I found that you can create validation rules once (correctly , without reloading whole script file ). Second and Third try won’t do anything. There will be problems with error placement or validation messages won’t show at all.
It seems that cached values are used. And it doesn’t matter if there are two different forms this behavior is global. Developers assumed that page should have only one form.</p? So how to fix this ? Delete validator data.