For quite a while, I was unsure how to go about doing validation in ASP.NET MVC. By default, it’s incompatible with the ASP.NET <asp:XyzValidator> server controls, so this gives us an opportunity to come up with something newer and better.

There have been a couple of great efforts from the community, including Juergen Baeurle’s MVC Validator Toolkit, and Matt Hawley’s MVC UI Validation Framework (now part of MVC Contrib). I wasn’t really satisfied with either, because they take validation out of the domain model and into the application’s UI (no offense guys, what you’ve done is cool).

So, check out my first ever screencast - 6 thrilling minutes of non-stop coding action, in which you get to add both server-side and breathtakingly fit client-side validation to an ASP.NET MVC application, while keeping all the validation rules right in the domain model. Whoo!

Oh noes! Either your feed reader has removed the screencast, or you haven’t enabled Javascript and Flash. You’re missing out!

For those of you that don’t have time for screencasts (like me, normally), here’s how to get the client-side validation goodness in your ASP.NET MVC application. I’m using Castle Validator for the server-side bits, and Live Validation for the client-side bits, fused into one terrifying alien beast hell-bent on ultimate data purity.

Instructions

1. Download and reference MvcValidator.dll and Castle.Components.Validator.dll (from the Castle project). In your master page, add a reference to the Live Validation script (preferably a local copy of it):

<script src="http://www.livevalidation.com/javascripts/src/1.3/livevalidation_standalone.compressed.js"></script>

2. Add validation attributes to your model object.

public class Person
{
    [ValidateNonEmpty("Please enter a name")]
    public string Name { get; set; }
 
    [ValidateNonEmpty("Please enter an email address")] [ValidateEmail]
    public string Email { get; set; }
 
    [ValidateNonEmpty("Please enter an age")] [ValidateInteger]
    public int? Age { get; set; }
}

3. Drop an Html.ClientSideValidation into your view:

<% using(Html.Form("Home", "SubmitPerson", FormMethod.Post)) { %>
    <p>Name: <%= Html.TextBox("MyPrefix.Name", ViewData.Name) %></p>
    <p>Email: <%= Html.TextBox("MyPrefix.Email", ViewData.Email)%></p>
    <p>Age: <%= Html.TextBox("MyPrefix.Age", ViewData.Age)%></p>
 
    <%= Html.ClientSideValidation(ViewData, s => "MyPrefix." + s) %>
    <%= Html.SubmitButton() %>
<% } %>

4. Strut, pose, be smug. You’re done!

Optional steps:

5. Add server-side validation keyed off the same validation attributes, using Castle Validator’s ValidatorRunner (the screencast shows this in action before the client-side validation).

6. Add CSS rules to get the red/green border effect as shown in the screenshot.

Downloads

Thoughts

I’d really love to see something along these lines baked into the official MVC framework, perhaps following Castle’s example of having a pluggable system for emitting Javascript for particular validation checks, so folks could integrate it with client-side validation libraries of their choice. (In my version, I’ve just hard-coded it to work with Live Validator.)

kick it on DotNetKicks.com