Client side check MVC3 not working with Ajax.BeginForm form

Question

I have the following view in partial view

@model PartDetail @using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId = "update_panel"})) { <h3>New @Model.PartType</h3> <p> Serial Number: <strong> @Html.EditorFor(model => model.SerialNumber) @Html.ValidationMessageFor(model => model.SerialNumber) </strong> </p> <p> Name: <strong> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </strong> </p> ...... more relatively boiler plate code here...... <p> <input type="submit" class="btn primary" value="Save Part"/> </p> } 

With model

 public class PartDetail { public string DateCreated { get; set; } [StringLength(255, MinimumLength = 3)] public string Description { get; set; } public Guid ID { get; set; } public string IsActive { get; set; } public string Manufacturer { get; set; } public IEnumerable<SelectListItem> Manufacturers { get; set; } [StringLength(100, MinimumLength = 3)] public string Name { get; set; } public string PartType { get; set; } [Required] [StringLength(100, MinimumLength = 3)] public string SerialNumber { get; set; } } 

And I refer (in the parent views of my partial view)

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

And nothing is verified. If I don’t type anything in the Serial number text box and click the "Submit" button, it will save it to the database without any problems.

Answer 1

Try adding an OnBegin callback to AjaxOptions and this should work.

 function validateForm() { return $('form').validate().form(); } @using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId = "update_panel", OnBegin = "validateForm" })) ... 

If this does not work for you, an alternative solution could be to submit the form using jQuery. That would be my preferred solution.

 <div id="result"></div> @using (Html.BeginForm()) { <h3>New @Model.PartType</h3> <p>Serial Number: <strong> @Html.EditorFor(model => model.SerialNumber) @Html.ValidationMessageFor(model => model.SerialNumber) </strong> </p> <p> Name: <strong> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </strong> </p> ...... more relatively boiler plate code here...... <p> <input type="submit" class="btn primary" value="Save Part"/> </p> } 

JQuery / JS function to submit form

  $(function () { $('form').submit(function () { $.validator.unobtrusive.parse($('form')); //added if ($(this).valid()) { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { $('#result').html(result); } }); } return false; }); }); 

Answer 2

Check your root Web.config solution / project. Does it contain the following lines?

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

It is not, add them.

Answer 3

In this case, the order of the javascript file, including the process, is important. Your order for including these files should be

 jquery.js jquery.validate.js jquery.validate.unobtrusive.js 

When I tried re-ordering, it works great for me. Give it a try.

Answer 4

you need to slightly change the action of your controller to verify operation in the Ajax request, you catch the partial view's RenderHtml and apply your validation to it, for example,

  //In Controller public string Create(PartDetail model) { string RenderHtml = RenderPartialViewToString("PartailViewName", model); return RenderHtml; } protected string RenderPartialViewToString(string viewName, object model) { if (string.IsNullOrEmpty(viewName)) viewName = ControllerContext.RouteData.GetRequiredString("action"); ViewData.Model = model; using (StringWriter sw = new StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); viewResult.View.Render(viewContext, sw); return sw.GetStringBuilder().ToString(); } } 

you need to pass ViewName and Model to RenderPartialViewToString . it will return you a confirmation view that you apply to the model.