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.
- In markup, calls
Html.ValidationMessage (for each validated element) and/or Html.ValidationSummary (once) to display any validation errors.
To add client functionality, you additionally do this:
- Register the following JavaScript libraries in the page:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js">
</script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.js")">
</script>
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.
Next time: Fun with formatting the error messages.
Example of Web Pages page with client validation enabled
@{
var message="";
// Specify what fields users must fill in.
Validation.RequireField("coursename", "Class name is required");
Validation.Add("coursename", Validator.StringLength(5));
if (IsPost) {
// Before processing anything, make sure that all user input is valid.
if (Validation.IsValid()) {
var coursename = Request["coursename"];
message = "For Class, you entered " + coursename;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- These script calls reference libraries that are used
for client-side validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js">
</script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js">
</script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")">
</script>
</head>
<body>
<form method="post">
<div>
@message
</div>
<div>
Class:
<input type="text"
name="coursename"
value="@Request["coursename"]"
@Validation.For("coursename") />
@Html.ValidationMessage("coursename")
</div>
<div>
<input type="submit" value="Submit" class="submit" />
</div>
</form>
</body>
</html>
See Also