I normally use jQuery validation any chance I get when it comes to validation, but sometimes you find yourself in situations where this isn’t the best option. jQuery validation normally doesn’t play very nice with ASP.NET web forms and it’s not unusual to have to make all kinds of adaptions for custom validation scenarios (in ASP.NET MVC it works much better).
I was recently asked to make several updates to an existing ASP.NET web forms application that included several forms of varying complexity. They all relied heavily on ASP.NET validation controls. One feature that was requested was to have validation as the user types and not on blur, another was to have icons signaling whether an input field had been successfully validated or not. Both notoriously difficult to implement using the traditional validation controls of ASP.NET web forms.
This brings us to a choice. Do we remove the validation controls and rewrite the validation using jQuery validation and custom server side validation? Do we keep the validation controls and try to customize them to accommodate the new client requests?
In this particular case I really didn’t want to have to rewrite all the validation and customizing the validation controls didn’t sound like a whole lot of fun either, so I tried to find some kind of a middle way. I came up with some sort of mysterious ASP.NET web controls and client side jQuery validation hybrid that look like this:
Nothing complicated. We simply hook up our validation to any elements with the data-validation attribute. Then we create a generic validation method that looks at the values of the attribute and calls the appropriate validation method.
This way I could leave my ASP.NET validation controls as they were and hook this up to the existing textboxes something like this:
And that’s it. Although bear in mind that I have attached no logic to the submit button at this point (in my case it wasn’t necessary).