ASP.NET MVC 3 Client-Side Validation Summary with jQuery Validation (Unobtrusive JavaScript)

Posted by Soe Tun on Geeks with Blogs See other posts from Geeks with Blogs or by Soe Tun
Published on Fri, 28 Jan 2011 19:31:40 GMT Indexed on 2011/01/28 23:27 UTC
Read the original article Hit count: 546

Filed under:

When we were working with ASP.NET MVC 2, we needed to write our own JavaScript to get Client-Side Validation Summary with jQuery Validation plugin.
I am one of those unfortunate people still stuck with .NET Framework Runtime 2.0 and .NET Framework 3.5; meaning I am still on ASP.NET MVC 2.
So I will still keep on supporting by answering any question you may have with my original code.

Long awaited ASP.NET MVC 3 has been released, and it supports Client Side Validation Summary with jQuery out-of-the-box with new features like Unobtrusive JavaScript.

1. _Layout.cshtml Template

Notice that I am using Protocol Relative URLs ( i.e., '//'. Not 'http://' or 'https://' ) to reference script files and css files and you should use it too like that!
However, please note that IE7 and IE8 will download the CSS files twice so use it with judgement.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Assets/Site.css")"  rel="stylesheet" type="text/css" />
    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    @RenderBody()

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"           type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"      type="text/javascript"></script>
    <script src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.min.js" type="text/javascript"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</body>
</html>

2. MVC View Template

There are 3 things you *must* do exactly to get Client Side Validation Summary working.

(1) You must declare your Validation Summary **inside** the `Html.BeginForm()` block like below.
(2) You must pass `excludePropertyErrors: false` to the Html.ValidationSummary() method.

@using (Html.BeginForm()) {
    @Html.ValidationSummary(false, "Please fix these errors.");

    <!-- The rest of your View Template -->

}

(3) You have to put the following two elements in the `<appSettings />` block of your Web.config file.

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

That is all you need to do. Simple, right?
I will upload a sample project for download soon.

Please let me know if you run into some issues.

P.S:
Without getting into too much technical details, I just wanted to let you know what I went through to get this to work.
I had to look into the ASP.NET MVC 3 RTM Source Code and the jquery.validate.unobtrusive.js source.

Initially, I thought I have to hack the jquery.validate.unobtrusive.js or something to get this to work.
But after digging into MVC3 RTM source, I found out how to do it.

Developer IT