Client side validation when using Ajax/jQuery to submit an ASP.NET MVC 3 form

Question

I am having trouble with client side validation when using Ajax and jQuery to handle a form sumission when using ASP.NET MVC 3.

Checking if the model is valid on the server side works, however the following snippet does not trigger the client side valiation.

Am I missing something?

@model ViewModels.LeadDetailModelCore @{using (Html.BeginForm("UpdateCore", "Leads", new { area = "Telesales" }, FormMethod.Post, new { id = "coreSave" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) @Html.HiddenFor(model => model.Lead_ID) @Html.LabelFor(model => model.LeadStatus_ID) @Html.DropDownListFor(model => model.LeadStatus_ID, new SelectList(Model.LeadStatuses, "LeadStatus_ID", "LeadStatus_Name"), "-- Please select a status --") @Html.ValidationMessageFor(model => model.LeadSource_ID) }} <script type="text/javascript"> // NOTE ADD $(function () { $('#coreSave').die().live("submit", function (e) { e.preventDefault(); var form = $(this); var val = form.validate() if (val.valid()) { $("#ProgressDialog").dialog("open"); // post via ajax } return false; }); }); </script> 

Answer 1

Make sure that you have included the proper scripts:

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

and that you manually parse validation for all dynamic DOM elements. So everytime you update the DOM you should register client validation if this form was not part of the DOM when you initially loaded the page:

$.validator.unobtrusive.parse($('#coreSave')); 

You might also find the following answer useful for using jQuery dialog with partial views.