JQuery.Validation.Unobtrusive client-side validation only works when scripts are on the watch page

Question

I have an ASP.NET MVC 4 App that uses the jQuery.validation.js and MVC jQuery.validation.unobtrusive.js plugin . I use data annotations in my view model to validate text box input as a whole.

This (nested) view is loaded in the parent view using ...

<% Html.RenderPartial("New"); %> 

One of the first downloads on the first page, client-side validation works. But any reloading of a nested view using an ajax call, client-side validation no longer works. Why is this?

Update : (sample code from web developer solution below)

 $.validator.unobtrusive.parse($('form')); 

Example:

 var saveAndUpdate = function (url) { var myForm = $('form', $('#TheDivThatContainsTheNewHTML')); $.ajax({ url: url, type: 'POST', data: myForm.serialize(), success: function (result) { $('#TheDivThatContainsTheNewHTML').html(result); $.validator.unobtrusive.parse($('#TheDivThatContainsTheNewHTML')); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }, dataType: 'html' }); } 

Answer 1

But any reloading of the nested view with an ajax call, client side validation no longer works. Why is that?

Validation applies to document ready , when you refresh the page, you must manually initiate validation for your form.

Like this:

 $.validator.unobtrusive.parse("form"); 

Same question: jquery.validate.unobtrusive does not work with dynamic nested elements