I always liked validation callout extender that is available in Ajax control toolkit. However in MVC, we largely rely on jQuery plugins to do all the fancy stuff (and of course important tasks too).
However, what if I want to use validation call out like functionality with data annotation feature of MVC 3 taking care of validation logic. In this article I will demonstrate how that can be done.
Of course there are plenty of jQuery validation plugins available which provides validation callout functionality. But that way, we lose advantage of doing validations based on data annotations. Means, I have to get my hands dirty again in managing validation conditions, validation message etc.
I tried to achieve that and I believe I have partially done it. I am still to remove some flaws from the code. But I think this would give someone like me a stating point… (I searched endlessly to see if someone has already done it).
I have used Ajax ControToolkit’s validation callout extender sample to style the callout box. I borrowed html tags and style of call out extender from this old post of James Ashley
little background about data annotation feature of MVC 3
You can take advantage of Data annotation model binder by adding Data Annotation Validation attribute on model properties. Following namespace are need to be included in you model class
We just need to decorate model property with the suitable annotation attribute. Like in the example below, the property UserName is required field.
By data annotation attribute, we add validation condition for server side validation at model level as well as validation on client side. To read more about Data annotation validation, read this tutorial on asp.net site
How client side validation happens by data annotation attributes
To demonstrate validation call out using data annotation, I have created this demo project which uses following model class to customize user registration