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,

        $(function() {
            var settngs = $.data($('form')[0], 'validator').settings;
            settngs.onkeyup = false;
            settngs.onfocusout = false;
        });

          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, 

        $(function() {
            var settngs = $.data($('form')[0], 'validator').settings;
            settngs.ignore = ".ignore";
        });

          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, 

        $(function() {
            var settngs = $.data($('form')[0], 'validator').settings;
            var oldErrorFunction = settngs.errorPlacement;
            var oldSucessFunction = settngs.success;
            settngs.errorPlacement = function (error, inputElement) {
                //Do something here
                oldErrorFunction(error, inputElement);
            }
            settngs.success = function (error) {
                //Do something here
                oldSucessFunction(error);
            }
        });

          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.