mike's web log

 

Blog Search


(Supports AND)

 

Google Ads

 

Feed

Subscribe to the RSS feed for this blog.

See this post for info on full versus truncated feeds.

 

Quote

As it turns out, computers have a hard time with the concept of "good".

Jeff Atwood



 

Navigation






<April 2014>
SMTWTFS
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910


 

25 Most-Visited Entries

 

Categories

  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
  RSS
 

Blogs I Read

 

Contact

Email me
 

Blog Statistics

Dates
First entry - 6/27/2003
Most recent entry - 4/3/2014

Totals
Posts - 2298
Comments - 2480
Hits - 1,619,436

Averages
Entries/day - 0.58
Comments/entry - 1.08
Hits/day - 410

Update every 30 minutes. Last: 7:24 AM Pacific

 
   |  Updated validation in Web Pages v2, Part 2

posted at 08:55 AM | | |

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:
  1. In code, calls Validation.RequireField, Validation.RequireFields, or Validation.Add to register each input element for validation.

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

  3. 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:
  1. 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.

  2. 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

[categories] ,