Download a complete solution for this article here

Using ASP.NET MVC 3 and jquery, we can easily and automatically validate and format data such as phone numbers and social security numbers into user friendly formats like (xxx) xxx-xxxx or xxx-xx-xxxx, not only when data is presented to the user, but also while the user is typing in data! We can also block the user from even entering non-numeric characters if we wish. We can parse that data after a form submit and strip out the parentheses and dashes before it reaches the controller action. We can also easily control the appearance of the input textboxes of all the fields in all the forms in one easily modified location. What’s nice about the approach presented here is that the developer only needs to designate a model field as a social security or phone number in one location (the view model) and the system handles all the html, jquery, and data cleanup automagically. This is done without using the class html attribute on any of the input controls, which frees the developer to use css classes as normal. Furthermore, this approach is compatible with Microsoft’s jquery unobtrusive client-side validation, so you can present the user with friendly highlighting and popups before invalid data is even sent to the server.  Put together, these techniques create a crisp, fluid experience for the users and a fast, easy development environment for the developers.

View full article »