Jquery unobtrusive validation works very slow ASP.Net MVC3

Question

I have ASP.Net MVC3 application in which there is an partial page which loads a huge load of html controls(around Count=980) which has it validation assigned to them.

JQuery Unobtrusive validation is taking a long while to validate the form with above controls. Its hitting the performance of the application. Is there a way to improve, how the validation is done on the elements of DOM?

Teeny

Answer 1

I had same issue. We found no easy way to improve the performance.

I had to disable unobtrusive and client side validation for the page. Form was taking 10 + second to render and it only had an id and checkbox per item for about 1000 items. After we removed client side and unobtrusive page load was about 1 sec

We just validated on the controller.

You can use these page level helpers

Html.EnableClientValidation(false);
Html.EnableUnobtrusiveJavaScript(false);

Proceeds

Woa ! I am curious, what kind of functionality has a thousand inputs in the same page? – Reclaim

Feature demanded client. Wanted to able to bulk confirm in an admin section. Didn't want paging and didn't want Ajax. So a giant form it was. – Proceeds

Answer 2

I came across this issue today. I realized that there was significant slowdown on one of my large lists. There is an option to view all, and in that view there is a form per line for deleting items. jquery.validate.unobtrusive was destroying this page on load. When it was removed, the load was only 2s. Many of the forms needed no validation, but some still did. As a result, i looked in the code for the file and found this:

parse: function (selector) {
        /// <summary>
        /// Parses all the HTML elements in the specified selector. It looks for input elements decorated
        /// with the [data-val=true] attribute value and enables validation according to the data-val-*
        /// attribute values.
        /// </summary>
        /// <param name="selector" type="String">Any valid jQuery selector.</param>
        $(selector).find(":input[data-val=true]").each(function () {
            $jQval.unobtrusive.parseElement(this, true);
        });

        $("form").each(function () {//THIS IS THE OFFENDING CODE
            var info = validationInfo(this);
            if (info) {
                info.attachValidation();
            }
        });
    }

I realized that I would need to somehow alter that call, but still retain functionality. What I ended up doing was to mark all of my forms that I did not want to go through this parse method with class="skipValid". Then, in the source code, I made this change:

$("form:not(.skipValid)").each(function () {

and I had the best of both worlds.

Percheron