Webforms 4.5默认模板和不显眼的验证访问验证器来更改css

时间:2013-05-22 09:51:43

标签: jquery asp.net webforms .net-4.5

我使用.net 4.5使用visual studio 2012创建了一个新的Web应用程序项目。我没有更改任何默认值或添加除了开箱即用的任何内容。

我已经在网上阅读了这包括不引人注意的验证,但除了脚本文件夹webuivalidation我可以找到任何参考,我猜它是,虽然通过nuget有很多其他。如果我去注册寻呼机并点击没有填写任何内容的按钮我得到默认的错误消息,所以我再次猜测它的工作。链接到4.5脚本管理器的详细信息我已阅读http://blogs.msdn.com/b/webdev/archive/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx

我想做什么是将css从默认值更改为bootstrap,如下面的链接所示:

MVC Twitter Bootstrap unobtrusive error handling

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

但是使用任何一种方法我得到错误,因为我无法获得jQuery.validator对象的未定义。此外,如果尝试$(this).valid()给出不支持的错误。所以,有人可以帮助并向我解释,因为看起来验证位不存在吗?我已经尝试了几个小时没有成功或真正理解这个问题。

感谢Jon

*****代码位***

我从上面的链接尝试了2位代码,不是我写的(我已经尝试过编辑,但仍然无法使其工作):

 $('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');
        }
    });
});   

此外:

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');
    })
});       

1 个答案:

答案 0 :(得分:1)

我已经设法通过覆盖ValidatorUpdateDisplay来使其在webforms中工作。 Webforms不使用jquery不显眼的验证或验证它使用WebUIValidation.js。我花了一整天的时间这让我发疯了。最后我认为最好覆盖现有的功能。编码基于:http://blog.benmcevoy.com.au/classing-invalid-elements-with-webforms-validation

见下面的代码。我希望这有助于其他人。如果您能使代码更好,请随时发表评论。

 (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);