Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3
Introduction:
By default, client side validation in ASP.NET MVC
3 leverages unobtrusive javascript and famous jQuery
validation plugin. The jQuery validation plugin makes client
side validation very straightforward. With this plugin,
you have a lot of
options to customize the client side validation. But
unfortunately, ASP.NET MVC 3 internally
initialize
the jQuery validation plugin and does not provide you an
option to customize the validation settings(options). In
this article, I will show you how to customize(override) the
jQuery validation settings(options).
Description:
Let's say you are creating an ASP.NET MVC 3 application with unobtrusive client side validation. In this application, you need to override the default validation settings(options). Now, let's say you need to only validate the form fields when the form is submitted. You can make this possible by adding this script at the bottom of your page,
1 |
$(function() {
|
2 |
var
settngs = $.data($('form')[0], 'validator').settings;
|
3 |
settngs.onkeyup = false;
|
4 |
settngs.onfocusout = false;
|
5 |
});
|
In the above code, I am first getting validator settings object. Then, I am setting the onkeyup and onfocusout properties of validator settings object to false. This will simply disable the validation on blur and key up. Now, let's say you need to disable the validation on input fields with class ignore. (Note, you can also disable it by directly adding the cancel class to your submit button) You can make this possible by adding this script at the bottom of your page,
1 |
$(function() {
|
2 |
var
settngs = $.data($('form')[0], 'validator').settings;
|
3 |
settngs.ignore = ".ignore";
|
4 |
});
|
In the above code, I am just setting the ignore property of validator settings object to .ignore. This will tell the jQuery validation plugin to ignore all input elements with class ignore during validation. Now, If you need to do something whenever an input element is marked as valid or invalid. You can make this possible by adding this script at the bottom of your page,
01 |
$(function() {
|
02 |
var
settngs = $.data($('form')[0], 'validator').settings;
|
03 |
var
oldErrorFunction =
settngs.errorPlacement;
|
04 |
var
oldSucessFunction = settngs.success;
|
05 |
settngs.errorPlacement = function
(error, inputElement) {
|
06 |
//Do something here
|
07 |
oldErrorFunction(error, inputElement);
|
08 |
}
|
09 |
settngs.success = function
(error) {
|
10 |
//Do something here
|
11 |
oldSucessFunction(error);
|
12 |
}
|
13 |
});
|
In the above code, I am first getting the callback functions for success and errorPlacement events. Then, I am registering new callback functions for success and errorPlacement events. Inside these new callback functions, I am invoking the previously registered callback function. Similarly, you can customize(override) the different options of jQuery validation plugin. A complete list of jQuery validation options can be found here.
Summary:
The jQuery validation plugin is the
most popular framework for client side validation. By
default, ASP.NEt MVC 3 uses this plugin to perform client
side validation. This plugin allows you to
customize(override) various validation settings(options).
In this article, I showed you how you can
customize(override) various validation
settings(options) using ASP.NET MVC 3. Hopefully you will
enjoy this article too.