When I was looking for information on wiring up custom validation in MVC 2 I couldn’t find a lot of information on getting the client side stuff working with jQuery that a) didn’t involve manually changing the MicrosoftMvcJQueryValidation.js file or b) worked, so I set about working it out myself. Here is what I found – a walk through for getting server and client side validation working using jQuery.
See my earlier post on getting validation working with AJAX loaded forms too.
Ok, so first, go off and read this guide from Phil Haack, this is the groundwork you need to get validation working, which I’ll briefly re-iterate here before talking about getting custom jQuery validator wired up.
Stage 1 – getting validation working on the server side first.
1A: your custom validation attribute
The following is a basic skeleton for a validator that will check a string’s minimum length (yes I know we have validators for min and max length, I’m trying to be concise here and show how to roll your own!);
1B: Consume your validation attribute in your view model
Mark up your target model property with your validation attribute.
1C: Output some validation messages
Use the MVC ValidationMessageFor helpers to output some validation messages.
1D: Check the model state in your controller
When your model is posted into your controller action, it will be automatically validated. You can check the model state and act accordingly, something like;
That’s it for server side stuff, if you fire up your form, leave the field blank and then submit it, the error message will appear. For the client side stuff we need to go a little further;
Stage 2 – get client validation working on the client
2A: Include validation base scripts
Include the following in your page to include the jQuery validation stuff. You may be asking, “where is MicrosoftMvcJQueryValidation.js, I don’t seem to have it” – it’s presently part of the MvcFutures project – take a look on codeplex.
2B: Tell your form to output client validation information
2C: Wiring up some client side code to the custom validation attribute
2D: Telling MVC that the above validator is the client side adaptor for our minimum length attribute;
2E: Registering our new client validation function
The final step is to actually write our new jQuery validator and register it with jQuery. (Now I think about it, I guess all the above steps apply to any client side validation technology you want to use and only this last step would be different!).
Remember in the ModelClientValidationRule we’re returning from our validator adapter above, we specified a validation type of “tj-custom”. We register a handler for this as follows;
Notice the params structure is a mirror of the params we returned in the ValidationParameter from the adapter? All we do is check the value against the params and return true if validation is passed or false if it’s failed. Simple as that – no need to start messing around with the jQuery in the MicrosoftMvcJQueryValidation file, basically, if the mvc built in stuff doesn’t recognise the validation type it passes it through to __MVC_ApplyValidator_Unknown method which just passes data through to our code using the pattern above.
I’ve unpicked this from the code I’m working on so I may have missed something minor, comment me if you have any questions. Enjoy……