Partial View MVC3 Ajax Validation Doesn't Work

Question

I have a strange problem where unobtrusive checks inside a partial view (which is rendered by Ajax.ActionLink) do not work.

This is a partial view:

@model MyWeb.Models.PersonSkill @using (Ajax.BeginForm("EditSkill", null, new AjaxOptions { UpdateTargetId = "skills" }, new { id = "EditSkillForm" })) { @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.YearsOfExperience) </div> <div class="editor-field"> @Html.EditorFor(model => model.YearsOfExperience) @Html.ValidationMessageFor(model => model.YearsOfExperience) </div> <p> <input type="submit" value="Save"/> </p> } 

And this is called:

 @Ajax.ActionLink("Edit", "LoadEditSkill", new { id = item.Id }, new AjaxOptions() { UpdateTargetId = "editSkillDialog" }, new { @class = "editSkill" }) 

The view is displayed perfectly. It sends the data back to the server, but it just doesn't check.

Answer 1

Many thanks to Joe Tuscan for pointing me in the right direction.

I fixed the problem by adding an OnSuccess subscriber to my call:

 @Ajax.ActionLink("Edit", "LoadEditSkill", new { id = item.Id }, new AjaxOptions() { UpdateTargetId = "editSkillDialog", OnSuccess = "onSuccess" }, new { @class = "editSkill" }) 

and adding a parse () call as described here :

 var onSuccess = function () { // enable unobtrusive validation for the contents // that was injected into the <div id="result"></div> node $.validator.unobtrusive.parse($("#editSkillDialog")); }; 

Answer 2

Always ensure that you include the necessary links to

jquery.validate.min.js and jquery.validate.unobtrusive.min.js and, of course, the main jquery library, this is usually the most common problem, and as I can see in your cshtml, they are not present in your page.