Asset/Site.

css

/* Styles for validation helpers

-----------------------------------------------------------*/
.error, .field-validation-error{color:red}

.input-validation-valid,.field-validation-valid,.validation-summary-
valid{display:none}
.input-validation-error{background:#fee;border:1px solid red; outline: none}
.input-validation-error:focus{outline:none}

input[type="text"].input-validation-error:focus, select.input-validation-
error:focus{outline:none}

.validation-summary-errors{color:red}
.validation-summary-errors span{font-weight:700}
.validation-summary-errors ul{list-style:disc inside}
.validation-summary-errors ul li{font-weight:normal}

.validation-summary-errors ul li label, .validation-summary-errors ul li

span{display:inline !important; font-weight:normal}

Assets/Script/MicrosoftMvcJQueryValidation.js

/// <reference path="jquery-1.3.2.js" />

/// <reference path="jquery.validate.js" />

// register custom jQuery methods

jQuery.validator.addMethod("regex", function(value, element, params) {

if (this.optional(element)) {
return true;
}

var match = new RegExp(params).exec(value);

return (match && (match.index == 0) && (match[0].length ==
value.length));
});

// glue

function __MVC_ApplyValidator_Range(object, min, max) {

object["range"] = [min, max];
}

function __MVC_ApplyValidator_RegularExpression(object, pattern) {

object["regex"] = pattern;
}

function __MVC_ApplyValidator_Required(object) {
object["required"] = true;
}

function __MVC_ApplyValidator_StringLength(object, maxLength) {

object["maxlength"] = maxLength;
}
function __MVC_ApplyValidator_Unknown(object, validationType,
validationParameters) {
object[validationType] = validationParameters;
}

function __MVC_CreateFieldToValidationMessageMapping(validationFields) {
var mapping = {};

for (var i = 0; i < validationFields.length; i++) {

var thisField = validationFields[i];
mapping[thisField.FieldName] = "#" +
thisField.ValidationMessageId;
}

return mapping;
}

function __MVC_CreateErrorMessagesObject(validationFields) {
var messagesObj = {};

for (var i = 0; i < validationFields.length; i++) {

var thisField = validationFields[i];
var thisFieldMessages = {};
messagesObj[thisField.FieldName] = thisFieldMessages;
var validationRules = thisField.ValidationRules;

for (var j = 0; j < validationRules.length; j++) {

var thisRule = validationRules[j];
if (thisRule.ErrorMessage) {
var jQueryValidationType = thisRule.ValidationType;
switch (thisRule.ValidationType) {
case "regularExpression":
jQueryValidationType = "regex";
break;

case "stringLength":
jQueryValidationType = "maxlength";
break;
}

thisFieldMessages[jQueryValidationType] =
thisRule.ErrorMessage;
}
}
}

return messagesObj;
}

function __MVC_CreateRulesForField(validationField) {
var validationRules = validationField.ValidationRules;

// hook each rule into jquery

var rulesObj = {};
for (var i = 0; i < validationRules.length; i++) {
var thisRule = validationRules[i];
switch (thisRule.ValidationType) {
case "range":
__MVC_ApplyValidator_Range(rulesObj,
thisRule.ValidationParameters["minimum"],
thisRule.ValidationParameters["maximum"]);
 break;

case "regularExpression":
__MVC_ApplyValidator_RegularExpression(rulesObj,
thisRule.ValidationParameters["pattern"]);
break;

case "required":
if ($("#" +
validationField.FieldName).get(0).type !== 'checkbox') {
// only apply required if the input control
is NOT a checkbox.
__MVC_ApplyValidator_Required(rulesObj);
}
break;

case "stringLength":
__MVC_ApplyValidator_StringLength(rulesObj,

thisRule.ValidationParameters["maximumLength"]);
break;

default:
__MVC_ApplyValidator_Unknown(rulesObj,
thisRule.ValidationType,
thisRule.ValidationParameters);
break;
}
}

return rulesObj;
}

function __MVC_CreateValidationOptions(validationFields) {
var rulesObj = {};
for (var i = 0; i < validationFields.length; i++) {
var validationField = validationFields[i];
var fieldName = validationField.FieldName;
rulesObj[fieldName] = __MVC_CreateRulesForField(validationField);
}

return rulesObj;
}

function __MVC_EnableClientValidation(validationContext) {
// this represents the form containing elements to be validated
var theForm = $("#" + validationContext.FormId);

var fields = validationContext.Fields;

var rulesObj = __MVC_CreateValidationOptions(fields);
var fieldToMessageMappings =
__MVC_CreateFieldToValidationMessageMapping(fields);
var errorMessagesObj = __MVC_CreateErrorMessagesObject(fields);

var options = {
errorClass: "input-validation-error",
errorElement: "span",
errorPlacement: function(error, element) {
var messageSpan =
fieldToMessageMappings[element.attr("name")];
$(messageSpan).empty();
$(messageSpan).removeClass("field-validation-valid");
 $(messageSpan).addClass("field-validation-error");
error.removeClass("input-validation-error");
error.attr("_for_validation_message", messageSpan);
error.appendTo(messageSpan);
},
messages: errorMessagesObj,
rules: rulesObj,
success: function(label) {
var messageSpan = $
(label.attr("_for_validation_message"));
$(messageSpan).empty();
$(messageSpan).addClass("field-validation-valid");
$(messageSpan).removeClass("field-validation-error");
}
};

var validationSummaryId = validationContext.ValidationSummaryId;

if (validationSummaryId) {
// insert an empty <ul> into the validation summary <div> tag (as
necessary)
$("<ul />").appendTo($("#" + validationSummaryId +
":not(:has(ul:first))"));

options = {
errorContainer: "#" + validationSummaryId,
errorLabelContainer: "#" + validationSummaryId + "
ul:first",
wrapper: "li",

showErrors: function(errorMap, errorList) {

var errContainer = $(this.settings.errorContainer);
var errLabelContainer = $("ul:first",
errContainer);

// Add error CSS class to user-input controls with

errors
for (var i = 0; this.errorList[i]; i++) {
var element = this.errorList[i].element;
var messageSpan = $
(fieldToMessageMappings[element.name]);
var msgSpanHtml = messageSpan.html();
if (!msgSpanHtml || msgSpanHtml.length == 0)
{
// Don't override the existing
Validation Message.
// Only if it is empty, set it to an
asterisk.
messageSpan.html("*");
}
messageSpan.removeClass("field-validation-
valid").addClass("field-validation-error");
$("#" + element.id).addClass("input-
validation-error");
}
for (var i = 0; this.successList[i]; i++) {
// Remove error CSS class from user-input
controls with zero validation errors
var element = this.successList[i];
var messageSpan =
fieldToMessageMappings[element.name];
$(messageSpan).addClass("field-validation-
valid").removeClass("field-validation-error");
 $("#" + element.id).removeClass("input-
validation-error");
}

if (this.numberOfInvalids() > 0) {
errContainer.removeClass("validation-summary-
valid").addClass("validation-summary-errors");
}

this.defaultShowErrors();

// when server-side errors still exist in the

Validation Summary, don't hide it
var totalErrorCount =
errLabelContainer.children("li:not(:has(label))").length +
this.numberOfInvalids();
if (totalErrorCount > 0) {
$
(this.settings.errorContainer).css("display", "block").addClass("validation-
summary-errors").removeClass("validation-summary-valid");
$
(this.settings.errorLabelContainer).css("display", "block");
}
},
messages: errorMessagesObj,
rules: rulesObj
};
}

// register callbacks with our AJAX system

var formElement = document.getElementById(validationContext.FormId);
var registeredValidatorCallbacks = formElement.validationCallbacks;
if (!registeredValidatorCallbacks) {
registeredValidatorCallbacks = [];
formElement.validationCallbacks = registeredValidatorCallbacks;
}
registeredValidatorCallbacks.push(function() {
theForm.validate();
return theForm.valid();
});

theForm.validate(options);
}

// need to wait for the document to signal that it is ready

$(document).ready(function() {
var allFormOptions = window.mvcClientValidationMetadata;
if (allFormOptions) {
while (allFormOptions.length > 0) {
var thisFormOptions = allFormOptions.pop();
__MVC_EnableClientValidation(thisFormOptions);
}
}
});
Code/ CustomValidationExtensions.cs

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Text;

namespace ClientSideValSummary
{
public static class CustomValidationExtensions
{
public static MvcHtmlString ValidationSummaryJQuery(this
HtmlHelper htmlHelper, string message, IDictionary<string, object>
htmlAttributes)
{
if (!htmlHelper.ViewData.ModelState.IsValid)
return htmlHelper.ValidationSummary(message,
htmlAttributes); // use default Validation Summary rendering if ModelState is
invalid

StringBuilder sb = new StringBuilder(Environment.NewLine);

var divBuilder = new TagBuilder("div");

divBuilder.MergeAttributes<string,
object>(htmlAttributes);

divBuilder.AddCssClass(HtmlHelper.ValidationSummaryValidCssClassName);
// intentionally add VALID css class

if (!string.IsNullOrEmpty(message))
{
//-------------------------------------------------
-------------------------------
// Build an EMPTY error summary message <span
style="display:none"> tag
//-------------------------------------------------
-------------------------------
var spanBuilder = new TagBuilder("span");
//spanBuilder.MergeAttribute("style",
"display:none");
spanBuilder.SetInnerText(message);

sb.Append(spanBuilder.ToString(TagRenderMode.Normal)).Append(Environment.NewLin
e);
}

divBuilder.InnerHtml = sb.ToString();
return
MvcHtmlString.Create(divBuilder.ToString(TagRenderMode.Normal));
}
}
}
Code/ UrlHelperExtension.cs

using System;
using System.Web.Mvc;

namespace ClientSideValSummary
{
public static class UrlHelperExtension
{
/// <summary>
/// CSS Stylesheet file url.
/// </summary>
/// <param name="url">url helper</param>
/// <param name="filename">filename</param>
/// <returns>CSS Stylesheet file url</returns>
public static string Stylesheet(this UrlHelper url, string
filename)
{
return url.Content("~/Assets/css/" + filename);
}

/// <summary>
/// JavaScript file url.
/// </summary>
/// <param name="url">url helper</param>
/// <param name="filename">filename</param>
/// <returns>JavaScript file url</returns>
public static string JavaScript(this UrlHelper url, string
filename)
{
return url.Content("~/Assets/script/" + filename);
}
}
}

Controllers/ CustomerController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using ClientSideValSummary.Models;

namespace ClientSideValSummary.Controllers
{
public class CustomerController : Controller
{
//
// GET: /Home/
 public ActionResult Index()
{
IList<Customer> modelList = new List<Customer>
{
new
Customer { Id = 1, FirstName = "Foo 1", LastName = "Bar 1", ZipCode =
"12345" },
new
Customer { Id = 2, FirstName = "Foo 2", LastName = "Bar 2", ZipCode = "67890" }
};
return View(modelList);
}

public ActionResult Edit(int id)

{
var model = new Customer { Id = id, FirstName = "Foo " +
id, LastName = "Bar " + id, ZipCode = "12345" };

return View(model);
}

[HttpPost]
public ActionResult Edit(Customer model)
{
// add the server-side error intentionally.
ModelState.AddModelError("FirstName", "This is my server-
side error.");

return View(model);
}
}
}

Models/ Customer.cs

using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel;

namespace ClientSideValSummary.Models
{
public class Customer
{
public int Id { get; set; }

[Required]
[DisplayName("First Name")]
public string FirstName { get; set; }

[Required]
[DisplayName("Last Name")]
public string LastName { get; set; }

[Required]
[DisplayName("Zip Code")]
 [StringLength(5, ErrorMessage = "{0} must be 5 character long.")]
[RegularExpression(@"\d{5}", ErrorMessage = "{0} must be five
digits.")]
public string ZipCode { get; set; }

[DisplayName("Email Address")]
[Required]
[DataType(DataType.EmailAddress)]
public string EmailAddress { get; set; }
}
}

Views/Customer/Edit.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<Customer>"
ContentType="application/xhtml+xml" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Edit Customer
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Edit</h2>

<%= Html.ValidationSummaryJQuery("Please fix these errors.", new

Dictionary<string, object> { { "id", "valSumId" } })%>

<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) { %>

<% ViewContext.FormContext.ValidationSummaryId = "valSumId"; %>

<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%= Html.LabelFor(model => model.FirstName) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.FirstName) %>
<%= Html.ValidationMessageFor(model =>
model.FirstName, "*") %>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.LastName) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.LastName) %>
<%= Html.ValidationMessageFor(model =>
model.LastName, "*")%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.EmailAddress) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.EmailAddress) %>
<%= Html.ValidationMessageFor(model =>
model.EmailAddress, "*")%>
</div>
 <div class="editor-label">
<%= Html.LabelFor(model => model.ZipCode) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.ZipCode) %>
<%= Html.ValidationMessageFor(model =>
model.ZipCode, "* Blah My Own Msg")%>
</div>
<p>
<input type="submit" name="submitButton"
value="Save" />
</p>
</fieldset>
<% } %>

<div>
<%= Html.ActionLink("Back to List", "Index") %>
</div>
</asp:Content>

Views/Customer/Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<IEnumerable<Customer>>" %>

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

Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Index</h2>
<table>
<tr>
<th></th>
<th>Id</th>
<th>FirstName</th>
<th>LastName</th>
<th>ZipCode</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td><%= Html.ActionLink("Edit", "Edit", new RouteValueDictionary
{ { "id", item.Id } }) %></td>
<td><%= Html.Encode(item.Id) %></td>
<td><%= Html.Encode(item.FirstName) %></td>
<td><%= Html.Encode(item.LastName) %></td>
<td><%= Html.Encode(item.ZipCode) %></td>
</tr>
<% } %>
</table>

</asp:Content>

Site.Master
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><?xml
version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>

<link
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquer
y-ui.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<%= Url.Stylesheet("Site.css") %>" type="text/css"
rel="stylesheet" media="screen" />
</head>
<body>
<div id="page">
<div id="maincontent">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"></script>
<script
src="https://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.js"
type="text/javascript"></script>

<script src="<%= Url.JavaScript("MicrosoftMvcJQueryValidation.js") %>"

type="text/javascript"></script>
</body>
</html>
<h2>Pledge Money to Our Campaign</h2>
<p>With your help, we can eradicate the &lt;blink&gt; tag forever.<p>
<% using(Html.BeginForm()) { %>
<div>
Your name: <%= Html.TextBox("pledge.SupporterName") %>
</div>
<div>
Your email address: <%= Html.TextBox("pledge.SupporterEmail")%>
</div>
<div>
Amount to pledge: $<%= Html.TextBox("pledge.Amount")%>
</div>
<p><input type="submit" /></p>
<% } %>

<script type="text/javascript">
$(function() {
$("form").validate({
errorClass: "field-validation-error",
rules: {
"pledge.SupporterName": { required: true, maxlength: 50 },
"pledge.SupporterEmail": { required: true, email: true },
"pledge.Amount": { required: true, min: 10 }
},
messages: {
"pledge.Amount": { min: "Come on, you can give at least $10.00!" }
}
})
});
</script>