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.

Published Wednesday, July 13, 2011 2:52 AM by imran_ku07

Comments

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 13, 2011 4:28 AM by help in assignment

ratly done i like that!

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 13, 2011 5:48 AM by Vest

Hello Imran,

Thank you for the post. I found it interesting. But I am curious a little: if I deal AJAX Forms, should I evaluate this function each time, I get a form back from the Action? I assume that since the form is replaced with a new View, all validation stuff should be reinitialized.

And the second question (if possible): is it possible to add custom validation rules on the client side using a similar approach with "settings"?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 13, 2011 6:25 AM by imran_ku07

@Vest

For first question see, weblogs.asp.net/.../unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx

For custom validation it is better to see the brad's post,

bradwilson.typepad.com/.../mvc3-unobtrusive-validation.html

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Thursday, July 14, 2011 4:11 AM by Vest

Imram,

Thank you for the reply. I will check it right now :)

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Friday, July 15, 2011 2:46 AM by Nekdo

I was wondering if I am allowed to use in any of my projects the jquery.validate.unobtrusive.js or jquery.unobtrusive-ajax.js script that comes with ASP.NET MVC 3? Or are there any limitations?

Namely the script contains only this comment:

   ** Copyright (C) Microsoft Corporation. All rights reserved.

According to my knowledge this means that no one is allowed to do anything with this script without explicit permission from Microsoft (ie. use it, redistribute it, modify it combine it with other scripts, sublicense it...). Or is there any other license that comes with ASP.NET MVC 3 or Visual Studio that overrides this?

Am I allowed to use it in web pages developed with Visual Studio - commercial and non-commercial ones? What about in web pages that do not run on Microsoft's technology and what about those not even developed in any of Microsoft's products?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Friday, July 15, 2011 3:17 AM by imran_ku07

@Nekdo

See forums.asp.net/.../1

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Monday, July 25, 2011 6:04 AM by noman_baloch

Hey Imran need some help regarding web development can u help me?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Monday, July 25, 2011 6:12 AM by imran_ku07

@noman_baloch,

Why not?

Contact me at imran_ku07@yahoo.com

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Monday, July 25, 2011 12:10 PM by abdulwakeel

nice creative. baloch

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Tuesday, July 26, 2011 5:59 AM by dmorrison

Thanks - very helpful tip! Seems you can also use the setDefaults() method to help with this (docs.jquery.com/.../setDefaults). Using it would allow you to set some defaults in a central place in your app that would apply to all forms (rather than doing the form selector in your first example.

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Tuesday, July 26, 2011 6:38 AM by imran_ku07

@dmorrison,

Thanks for your tip.

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 27, 2011 2:40 AM by Rais Hussain

Thank you for nice tip, but can you give an example in action? I mean what possibilities are to work with your define technique and one complete example to grip on your topic.

It is appreciated that without changes in plugin we can use properties to cope with it.

Thanks

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 27, 2011 3:07 AM by imran_ku07

@Rais,

I don't get what you mean?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 27, 2011 6:07 AM by Rais Hussain

Can you provide sample application code for the above topic explained by you?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, July 27, 2011 9:02 AM by Rais Hussain

@Imran Thank you for sharing the running code. It worked. Thanks a lot.

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Thursday, July 28, 2011 12:29 AM by walia_jagwinder

learn t something new about validation

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wednesday, January 11, 2012 11:27 AM by Greg

Have been looking for this for a month!

Thanks - it works great!!!

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Friday, March 2, 2012 3:15 PM by Todd

Any idea why this method of hooking errorPlacement and success does not work with MVC4?

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Saturday, March 3, 2012 6:12 AM by imran_ku07

@Todd, I have tested this on MVC 4, this is working fine for me

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Monday, April 9, 2012 6:39 PM by Martin Irigaray

I wanted to disable the validation of a form because was not for input, was a filter one. Is this method still the best way to do it in ASP.NET MVC 3 final?. Thanks.

# re: Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Monday, April 9, 2012 11:19 PM by imran_ku07

@Martin,

Add cancel class to your submit button.