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.

stackoverflow.com/questions/8927933/…

Joe
– Joe

2012-10-08 15:57:37 +00:00
Commented Oct 8, 2012 at 15:57 — Joe
– Joe, Commented Oct 8, 2012 at 15:57

Community · Accepted Answer · 2017-05-23 11:44:22Z

5

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"));
};

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 8, 2012 at 16:57

ncabral

2,5321 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Freeman · Accepted Answer · 2012-10-08 15:56:03Z

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 8, 2012 at 15:56

answered Oct 8, 2012 at 15:50

Freeman

5,8013 gold badges32 silver badges41 bronze badges

1 Comment

ncabral Over a year ago

All those JQuery js files are present. You cannot see them in the cshtml since it's a partial view.

Collectives™ on Stack Overflow

MVC3 Ajax Form Validation with Partial View not Working

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related