Webforms 4.5 default template and unobtrusive validation access validator to change css

Question

I have created a new web application project using visual studio 2012 using .net 4.5. I have not changed any defaults or added anything other than what comes out of the box.

I have read all over the web this included unobtrusive validation but can find any reference to it other than in the scripts folder webuivalidation which i am guessing is it, although through nuget there are lots of others. If i go to the register pager and click the button not filling anything in i get the default error messages, so again i am guessing its working. link to details about 4.5 script manager i have read http://blogs.msdn.com/b/webdev/archive/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx

What i want to do is to change the css from the default to bootstrap as shown in the below links:

MVC Twitter Bootstrap unobtrusive error handling

http://www.braindonor.net/blog/integrating-bootstrap-error-styling-with-mvcs-unobtrusive-error-validation/381/

But using either or any method i get errors as i cant get the jQuery.validator object its undefined. Also if trying if $(this).valid() gives an error of not supported. So please can someone help and explain it to me as it appears the validate bits are not there?. I have tried for hours with no success or real understanding of the problem.

Thanks Jon

***** code bits ***

2 bits of code i have tried from the above links, not written by me (i have tried editing but still couldnt get it to work):

 $('form').submit(function () {
    if ($(this).IsValid()) {
        $(this).find('div.control-group').each(function () {
            if ($(this).find('span.field-validation-error').length == 0) {
                $(this).removeClass('error');
            }
        });
    }
    else {
        $(this).find('div.control-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('error');
            }
        });
    }
});
$('form').each(function () {
    $(this).find('div.control-group').each(function () {
        if ($(this).find('span.field-validation-error').length > 0) {
            $(this).addClass('error');
        }
    });
});

Also:

jQuery.Page_Validators.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.control-group').removeClass('success').addClass('error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.control-group').removeClass('error').addClass('success');
        }
    }
});

$(document).ready(function () {
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-inline');
    })
});

score 1 · Accepted Answer · answered May 22 '13 at 20:39

I have managed to get this working in webforms by overriding ValidatorUpdateDisplay. Webforms does not use jquery unobtrusive validation or validate it uses WebUIValidation.js. I have spent all day on this its been driving me crazy. In the end i thought it best to override existing functions. Coded based on: http://blog.benmcevoy.com.au/classing-invalid-elements-with-webforms-validation

See code below. I hope this helps someone else. Please feel free to comment if you can make the code better.

 (function ($) {
            if (window.ValidatorUpdateDisplay) {
                var proxied = window.ValidatorUpdateDisplay;

                window.ValidatorUpdateDisplay = function ()
                {
                    onBefore(arguments);

                    var result = proxied.apply(this, arguments);

                    onAfter(arguments);

                    return result;
                };

                var onBefore = function (arguments) {

                };

                var onAfter = function (arguments)
                {
                    var control = document.getElementById(arguments[0].controltovalidate);
                    var validators = control.Validators;
                    var isValid = true;

                    for (var i = 0; i < validators.length; i++) {
                        if (!validators[i].isvalid) {
                            isValid = false;
                            break;
                        }
                    }

                    if (isValid) {                                                       
                        var group = $(control).closest('div.control-group');
                        if (group.find('span.field-validation-error').length > 0) {
                            group.removeClass('error');
                            group.addClass('success');
                        }

                    } else {                            
                        var group = $(control).closest('div.control-group');
                        if (group.find('span.field-validation-error').length > 0) {
                            group.removeClass('success');
                            group.addClass('error');
                        }
                    }
                };
            }
        })(jQuery);

Webforms 4.5 default template and unobtrusive validation access validator to change css

1 Answers1