MVC Twitter Bootstrap不显眼的错误处理

Question

我一直试图让MVC Jquery不引人注意的错误处理与twitter bootstrap一起工作一段时间了.它到了关键点我要么编辑jquery.validate,要么在document.ready上做一些破解和削减.

为了使用不引人注意的错误处理来使用Bootstrap和MVC,我需要将它附加到'control-group'类的'error'类.除此之外,'error'类被附加到输入.

我想知道社区中是否有人找到了解决方案.

例如

典型的bootstrap标记就像这样......

<div class="control-group">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

什么应该发生,当jquery.validate不引人注目的火灾时模糊...它会改变为以下

<div class="control-group error">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid help-inline" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

要在回发/提交时使用此功能,您可以执行以下操作...

//twitter bootstrap on post
$(function () {
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-inline');
    });

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


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

});

但是,在模糊时它不会像你期望的那样工作.我不想编辑bootstrap CSS或Jquery.validate文件,因为它们可能会在某个时刻推出更新.

我会创建一个委托,或绑定到jquery函数并从那里工作.这是我不熟悉的深层JS代码,但可以通过它进行时间交换.

有没有人知道我从哪里开始解决这个问题,或者知道它在哪里实施/讨论过？

Answer 1

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

最后,这为我修好了.我希望这对其他人也有帮助......

我的最终JS就这样结束了.

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

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


    $('form').each(function () {
        $(this).find('div.control-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('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");
        }
    });
} ();

Answer 2

这是一个很好的解决方案......

将其添加到您的_Layout.cshtml文件外jQuery(document).ready():

<script type="text/javascript">

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

</script>

在里面添加$(document).ready():

$("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
$("div.control-group").has("span.field-validation-error").addClass('error');
$("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

你很高兴.

代码片段取自:

ASP.NET MVC的Twitter Bootstrap验证样式

将Bootstrap错误样式与MVC的不显眼错误验证集成

@ daveb的回答

Answer 3

除了@ leniel-macaferi提供的答案之外,我使用以下作为我的$(document).ready()函数:

$(function () {
    $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
    $("div.control-group").has("span.field-validation-error").addClass('error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");
});

如果服务器端验证在表单发布上失败,并且将任何验证摘要格式化为引导错误警报,这也会在控件组上设置"错误"类.