css - MVC Twitter Bootstrap 不显眼的错误处理

Question

一段时间以来，我一直在尝试让 MVC Jquery 不显眼的错误处理与 twitter bootstrap 一起工作。关键是我要编辑 jquery.validate 或对 document.ready 做一些修改和削减。

为了获得不显眼的错误处理以与 Bootstrap 和 MVC 一起工作，我需要将它附加到“控制组”类的“错误”类。除此之外，“错误”类被附加到输入中。

我想知道社区中是否有人已经找到解决方案。

例如

典型的 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 unobtrusive 触发时，blur 应该会发生什么......它会变成下面的

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

});

但是，在 blur 上它不会像您预期的那样工作。我不想编辑 bootstrap CSS 或 Jquery.validate 文件，因为它们可能会在某个时候推出更新。

我会创建一个委托(delegate)，还是绑定(bind)到 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");
        }
    });
} ();