Check failed asp.net mvc 3.0 client

Question

This is the code in my partial view -

@using (Ajax.BeginForm("SaveLayout", new AjaxOptions { HttpMethod = "Post"})) { @Html.ValidationSummary(true) <div style="padding: 10px;"> <div class="editor-field"> Layout Name: @Html.EditorFor(m => m.Name) @Html.ValidationMessageFor(m => m.Name)</div> <br /> <br /> <input type="submit" value="Save" /> <input type="button" onclick="CloseDialog()" value="Cancel" /> </div> } 

in my _Layout.cshtml looks like this:

 <script src="@Url.Content("~/Scripts/JQuery/jquery-1.6.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery-ui.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.validate.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/JQuery/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 

I have this in my web.config root -

 <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

this is what my controller action looks like -

 [HttpPost] public ActionResult SaveLayout(Model.Layout layout) { if (ModelState.IsValid) { ILayout.SaveLayout(layout); } return PartialView("_SaveLayout", layout); } 

and rouhgly is my model -

 public class Layout : BaseModel { [Required(ErrorMessage = "Please assign name to the compare group.")] public string Name { get; set; } } 

I can’t verify that my client-side check works when the name field is empty and the user clicks the save button. Can someone please tell me what I'm doing wrong here? Any help would be greatly appreciated.

Answer 1

As soon as you update the DOM with the new contents of the form, the validation check fails because all the event handlers that it initially attached die. Here 's a blog post that you can watch that explains how to re-enable client validation in dynamically loaded content.

Basically, you should use the $ .validator.unobtrusive.parse method in your AJAX success callbacks when updating the DOM to re-enable client validation.