MVC3 Ajax Form Validation with Partial View not Working

Question

I have a strange problem where the unobtrusive validations inside a partial view (which is being rendered by a Ajax.ActionLink) does not work.

This is the 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 by:

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

The view is rendered fine. It posts back data to the server, but it just doesn't validate.

http://stackoverflow.com/questions/8927933/unobtrusive-validation-doesnt-work-with-ajax-beginform — Joe, Oct 08 '12 at 15:57

score 5 · Accepted Answer · edited May 23 '17 at 11:44

Many thanks to Joe Tuskan for pointing me at the right direction.

I fixed the issue 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 calling parse() like explained here:

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

Freeman · Answer 2 · 2012-10-08T15:56:03.103

1

Always make sure you included the necessary references 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 either.

edited Oct 08 '12 at 15:56

answered Oct 08 '12 at 15:50

Freeman

5,691
3
29
41

All those JQuery js files are present. You cannot see them in the cshtml since it's a partial view. – ncabral Oct 08 '12 at 16:43

MVC3 Ajax Form Validation with Partial View not Working

2 Answers2