ASP.NET MVC with JQuery Validation and ValidationSummary

     Introduction:

          One of the great feature of ASP.NET MVC 2 is the support of client side validation. Client side validation in ASP.NET MVC 2 is possible with ASP.NET Ajax(MicrosoftMvcValidation.js) and jQuery(MicrosoftMvcJQueryValidation.js) libraries. Both ASP.NET Ajax and jQuery works well. When you use ASP.NET Ajax client side validation in ASP.NET MVC, Html ValidationSummary helper will display validation errors when invalid form is submitted but when you use jQuery client side validation in ASP.NET MVC, Html ValidationSummary helper will not display validation errors when invalid form is submitted. In this article I will show you how to make it possible to display validation errors when invalid form is submitted in ValidationSummary when you are using jQuery client side validation.

    Description:

          Let's create a sample application to demonstrate this. First of all create an ASP.NET MVC application. Then just open HomeController.cs and add the following code,

        public ActionResult Index()
        {
            return View();
        }
        
        [HttpPost]
        public ActionResult Index(Student s)
        {
            if(!ModelState.IsValid)
                return View();
            return Content("Thank you for submitting your form");
        }

          Next create a new class file Student.cs inside Model folder and add the following code, 

    public class Student
    {
            [Required]
            public string Name { get; set; }

            [Required, Range(0, 200)]
            public int? Age{ get; set; }
    }

          Next add a view for Index action and add the following lines inside this view,

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ValidationSummaryAndJqueryValidation.Models.Student>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.EnableClientValidation();%>        
    <%using(Html.BeginForm()){ %>
    <%: Html.ValidationSummary() %>
        <table>
        <tr>
            <td>
                Name:
            </td>
            <td>
                <%: Html.TextBoxFor(a => a.Name)%>
            </td>
            <td>
                <%: Html.ValidationMessageFor(a => a.Name)%>
            </td>
        </tr>
        <tr>
            <td>
                Subject:
            </td>
            <td>
                <%: Html.TextBoxFor(a => a.Age)%>
            </td>
            <td>
                <%: Html.ValidationMessageFor(a => a.Age)%>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <input type="submit" />
            </td>
        </tr>
    </table>
    <%} %>
</asp:Content>

         Now let's first add the necessary ASP.NET Ajax script files for validation in Site.Master,

<script src="<%=Url.Content("~/Scripts/MicrosoftAjax.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcAjax.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcValidation.js")%>" type="text/javascript"></script>

         Now just run this application. You will find the following screen,

         This shows that ValidationSummary is work as expected if you use ASP.NET Ajax validation. Now just replace the above script files with jQuery script files for validation in Site.Master,

<script src="<%=Url.Content("~/Scripts/jquery-1.4.1.min.js")%>"type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.validate.js")%>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js")%>" type="text/javascript"></script>

         Now just run this application again. You will find the following screen,

         This shows that ValidationSummary is not display validation errors if you use jQuery validation script files. To make it work just open MicrosoftMvcJQueryValidation.js and replace,

	errorClass: "input-validation-error",

         with

        invalidHandler: function (form, validator) {            
            var ul = $("#validationSummary ul");
            if (ul.length > 0) {
                $("#validationSummary").addClass("validation-summary-errors");
                $("#validationSummary").removeClass("validation-summary-valid");
                ul.html("");                
                for (var name in validator.errorList)
                    ul.append("<li>" + validator.errorList[name].message + "</li>")
            }
        },
        errorClass: "input-validation-error",

         The above code simply display ValidationSummary with validation errors when invalidHandler event is fired. The invalidHandler event is fired when an invalid form is submitted. Now save MicrosoftMvcJQueryValidation.js file and run again your application you will find that ValidationSummary will work as expected. If you need to process something when the form is valid, you can handle submitHandler event in the same way.

    Summary:

          ValidationSummary HTML helper is used to displays a summary of all validation errors. But ValidationSummary not shows validation errors when you use it with jQuery client side validation. So in this article I showed how to display validation errors in ValidationSummary when you are using jQuery client side validation. I showed this with an example. I am also attaching a sample application. Hope you will enjoy this article too.