ASP.NET MVC 3 Client-Side Validation Summary with jQuery Validation (Unobtrusive JavaScript)
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 likeUnobtrusive 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.
- You must declare your Validation Summary **inside** the
`Html.BeginForm()`block like below. - You must pass
`excludePropertyErrors: false`to theHtml.ValidationSummary()method.
@using (Html.BeginForm()) { @Html.ValidationSummary(false, "Please fix these errors."); <!-- The rest of your View Template --> }
Html.ValidationSummary(false, "Please fix these errors.")generates the HTML code below.
<div class="validation-summary-valid" data-valmsg-summary="true"> <span>Please fix these errors.</span> <ul><li style="display:none"></li></ul> </div>
If you look into the jquery.validation.unobtrusive.js source code, you will understand why I said the Validation Summary declaration must be inside the
Html.BeginForm( )block.
On line #56 inside thefunctiononErrors(form, validator) {// 'this' is the form elementfunction, it retrieves the validation summary HTML node like below.
var container = $(this).find("[data-valmsg-summary=true]")
Basically, it looks for the validation summary HTML node **inside** the corresponding
<form>tag.
If you don't declare the validation summary block usingHtml.ValidationSummary(false, "Please fix these errors.")using thefalseparameter, the data tagdata-valmsg-summary="true"does NOT get generated, and the jQuery Validation Unobtrusive library won't be able to locate your validation summary to populate the error messages.
This is needed because you may have multiple<form>tags on the entire page and the validation library needs to know exactly which validation summary block to insert the client-side validation error messages.
- 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"/>
3. CSS Styles for Validation
As Anthony mentioned below in the comments, I forgot to mention about the CSS styles used by MVC framework for validation display.
The CSS class names below are pretty self-explanatory of what they do.
.input-validation-error{ border: 1px solid #f00 }.input-validation-valid{ /* Optional: you can set whatever style you want */ }.field-validation-error{ color: #f00 }.field-validation-valid{ display: none }.validation-summary-errors{ font-weight: bold; color: #f00 }.validation-summary-valid{ display: none }
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.