Question

从Bootstrap 2.3.2升级到Bootstrap 3后，在需要验证时，我无法获得漂亮的红色边框。

我已经更改了我的表单，因为bootstrap已经删除了'controls'类，并将control-group更改为form-control，如下所示：

这

  <div class="control-group">
        @Html.LabelFor(model => model.ForeName, new { @class = "control-label" })
        <div class="controls">
        @Html.TextBoxFor(model => model.ForeName)
        @Html.ValidationMessageFor(m => m.ForeName)
        </div>
    </div>

要

<div class="form-group">
    @Html.LabelFor(model => model.ForeName, new { @class = "control-label col-md-2" })
    <div class="col-md-6">
    @Html.TextBoxFor(model => model.ForeName, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.ForeName)
    </div>
</div>

在用户未能在提交时填写名称之前，用户看到以下内容：

enter image description here

升级后

：

enter image description here

我在互联网上进行了一些搜索，我发现here它解释了再次验证工作。

它在描述中说“我们需要挂钩到MVC使用的jQuery模型验证库。可以将以下脚本添加到验证包中以应用Bootstrap css类。”

我已经使用网页中提供的js创建了一个validation.js，并将其捆绑到我的网站。我查看了源代码，然后我看到它被加载了。

但我还是无法进行验证吗？

我在这里想念的是什么？

Jquery版本1.11.1.js

这是我的validation.js：

 $(function () {
    // any validation summary items should be encapsulated by a class alert and alert-danger
    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-danger');
    });

    // update validation fields on submission of form
    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                    $(this).addClass('has-success');
                }
            });
        }
        else {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).removeClass('has-success');
                    $(this).addClass('has-error');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-danger') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-danger');
                }
            });
        }
    });

    // check each form-group for errors on ready
    $('form').each(function () {
        $(this).find('div.form-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('has-error');
            }
        });
    });
});

var page = function () {
    //Update the validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".form-group").addClass("has-error");
            $(element).closest(".form-group").removeClass("has-success");
        },
        unhighlight: function (element) {
            $(element).closest(".form-group").removeClass("has-error");
            $(element).closest(".form-group").addClass("has-success");
        }
    });
    } ();

由于

Answer 1

我遇到了类似你的类似问题，因此构建了一个与bootstrap 3.1.1配合使用的自举主题验证摘要面板

我最近刚刚添加了对不显眼的验证的支持，它只需要对标准的jquery.unobtrusive.js文件进行一次更改，该文件在我的wiki中仅用于样式化。

https://github.com/JellyMaster/MVCBootstrap

https://github.com/JellyMaster/MVCBootstrap/wiki/BootStrapped-Validation-Summary

编辑：注意到你排序了你的问题，但希望这有助于其他人。

编辑2：因为我对现在已经删除它的不引人注目的支持感到高兴。一旦我找到了更好的解决方案，我会更新这篇文章。感谢Erik的反馈。

在迁移Bootstrap 3之后，引导样式验证已经破坏了Asp.net MVC4

1 个答案: