Our application currently only performs server-side
validation – which means that our end users will need to perform a form submit
to the server before they’ll see any validation error messages.
One of the cool things about ASP.NET MVC 2’s validation
architecture is that it supports both server-side and client-side
validation. To enable this, all we need to do is to add two JavaScript
references to our view, and write one line of code:
When we add these three lines, ASP.NET MVC 2 will use the
validation meta-data we’ve added to our Person class and wire-up client-side
JavaScript validation logic for us. This means that users will get immediate
validation errors when they tab out of an input element that is invalid.
To see the client-side JavaScript support in action for our
friends application, let’s rerun the application and fill in the first three
textboxes with legal values – and then try and click “Create”. Notice how
we’ll get an immediate error message for our missing value without having to
hit the server:
If we enter some text that is not a legal email the error
message will immediately change from “Email Required” to “Not a valid email”
(which are the error messages we specified when we added the rules to our
Person class):
When we enter a legal email the error message will
immediately disappear and the textbox background color will go back to its
normal state:
The nice thing is that we did not have to write any custom
JavaScript of our own to enable the above validation logic. Our
validation code is also still very DRY- we can specify the rules in one place
and have them be enforced across all across the application – and on both the
client and server.
Note that for security reasons the server-side validation
rules always execute even if you have the client-side support enabled.
This prevents hackers from trying to spoof your server and circumvent the
client-side rules.
The client-side JavaScript validation support in ASP.NET MVC
2 can work with any validation framework/engine you use with ASP.NET MVC.
It does not require that you use the DataAnnotation validation approach – all
of the infrastructure works independent of DataAnnotations and can work with
Castle Validator, the EntLib Validation Block, or any custom validation
solution you choose to use.
If you don’t want to use our client-side JavaScript files,
you can also substitute in the jQuery validation plugin and use that library
instead. The ASP.NET MVC Futures download will include support for enable
jQuery validation against the ASP.NET MVC 2 server-side validation framework as
well.