I'm Mike Pope. I live in the Seattle area. I've been a technical writer and editor
for over 30 years. I'm interested in software, language, music, movies, books, motorcycles,
travel, and ... well, lots of stuff.

In the last post, I laid out the basics of the Validation helper that's introduced in ASP.NET Web Pages v2. As I noted then, the helper supports both server- and client-side validation. Here's how to implement the client side.

So, you've got a page that already does this:

In code, calls Validation.RequireField, Validation.RequireFields, or Validation.Add to register each input element for validation.

In code, calls Validation.IsValid to determine whether all validation checks have passed.

Two of the three libraries are loadable from a content delivery network (CDN), so you don't necessarily have to have them on your computer or server. However, you do have to have a local copy of jquery.validate.unobtrusive.js. For now, the easiest (if somewhat hacky) way to get this is to create a new Web Pages site based on one of the site templates (e.g. Starter Site). The site created by the template includes the jquery.validate.unobtrusive.js file in its Scripts folder, from which you can copy it to your site.

In markup, for each element that you're validating, add a call to Validation.GetHtml(field)Validation.For(field)(changed in the Feb 2012 Beta of v2). (See notes below.) This causes the Validation helper to emit attributes that hook in client-side validation. (Rather than emitting actual JavaScript code, the method emits attributes like data-val-..., which support so-called unobtrusive client validation that uses jQuery to do the work.)

That's it. Now when you run the page, validation runs when the user enters data in a field and then leaves the field — for example, by tabbing to the next field. The client validation uses the same methods to display errors as server validation, so no change there.

At the end of this post I've got a simple page that shows client-side validation enabled.

Additional notes

Whether you have client validation or not, ASP.NET always runs server-side validation. This is for security, in case someone manages to bypass client validation. Client-side validation is a convenience for the user (immediate response), not a substitute for server processing.

Not all validation checks run on the client. In particular, data-type validation (integer, date, etc.) won't run on the client. This is due to complexities with locale-specific formatting of these types. (For example, date formatting varies a lot by locale.) Tho I don't know this for sure, I believe the thinking here is that rather than implementing a version of data-type validation that failed for some locales, they decided to keep it clean and just do all that validation on the server.

Update These checks work on both the client and server:

Required

Range(minValue, maxValue)

StringLength(maxLength[, minLength])

Regex(pattern)

EqualsTo(otherField)

In the December Beta release, the method to add field-level client validation is Validation.GetHtmlValidation.For(field). This might be renamed in a subsequent release. Indeed it was.