首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在MVC DataAnnotations中使用BootstrapValidator

在MVC DataAnnotations中使用BootstrapValidator
EN

Stack Overflow用户
提问于 2015-06-04 01:19:12
回答 1查看 1.2K关注 0票数 16

我使用DataAnnotations来指定我的验证规则,默认情况下,这些验证规则被添加到客户端,以便通过jquery进行验证。

我喜欢使用BootstrapValidator.js,因为我喜欢错误/成功消息的呈现方式。但是,它需要我在客户端重新定义验证规则。可以找到An article about BootstrapValidator.js

有没有办法在使用BootstrapValidator的同时使用DataAnnotations并在一个地方定义规则?

有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 2015-06-07 16:38:37

无需再次重新定义验证规则。您可以简单地将MVC type validation (即Jquery Validation Plugin)与Bootstrap样式集成在一起,方法是拖放一个快速脚本,并在您的验证脚本之后引用它:

代码语言:javascript
复制
$(function () {
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-inline');
    });

    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-error');
        $(this).addClass('alert-block');
    });

    $('form').submit(function () {
        if ($(this).valid()) {
            $(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');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-error') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-error');
                    $(this).addClass('alert-block');
                }
            });
        }
    });

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

    $("input[type='password'], input[type='text']").blur(function () {
        if ($(this).hasClass('input-validation-error') == true || $(this).closest(".control-group").find('span.field-validation-error').length > 0) {
            $(this).addClass('error');
            $(this).closest(".control-group").addClass("error");
        } else {
            $(this).removeClass('error');
            $(this).closest(".control-group").removeClass("error");
        }
    });
});

var page = function () {
    //Update that validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".control-group").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").removeClass("error");
        }
    });
} ();
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30626675

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档