30

我正在使用 html5/Razor/MVC3，利用来自 Twitter 的 Bootstrap 模板。我希望表单验证看起来像他们记录的那样光滑（http://twitter.github.com/bootstrap/#forms）。因此，如果我们看一下用于帐户注册的标准样板 MVC3，标记将如下所示：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class="form-stacked" })) {
    @Html.ValidationSummary(true, "Snap! Something went wrong")
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class="clearfix error">
                @Html.LabelFor(m => m.UserName)
                <div class="input">
                    @Html.TextBoxFor(m => m.UserName)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Email)
                <div class="input">
                    @Html.TextBoxFor(m => m.Email)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Password)
                <div class="input">
                    @Html.PasswordFor(m => m.Password)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.ConfirmPassword)
                <div class="input">
                    @Html.PasswordFor(m => m.ConfirmPassword)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span>
                </div>
            </div>
        </fieldset>
        <div class="actions">
            <button class="btn large primary" type="submit">Register</button>
        </div>
    </div>

我想要做的是让容器 div 注入“错误”类，就像我在第一个输入中硬编码一样。（因此在进入页面时，该 div 将有一个“clearfix”类，但如果该输入块未通过验证，它会将其标记为“clearfix error”）。我想我将不得不更新 div 块以包含某种 id 并可能向 ValidationMessage 添加一个新的 data- 属性。扩展 ValidationMessageFor 助手没有问题。我只是不能 100% 确定扩展现有库的方法应该是什么。关于如何解决这个问题的任何建议？

TIA。

更新：

我认为这种方法是合理的：

<div id="UserNameContainer" class="clearfix error">
    @Html.LabelFor(m => m.UserName)
    <div class="input">
        @Html.TextBoxFor(m => m.UserName)
        <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName, null, new { @data_container = "UserNameContainer" })</span>
    </div>
</div>

通过使用数据容器名称装饰我的验证消息，我可以定位容器 div。现在我只需要弄清楚如何拦截验证消息。

4

7 回答 7

52

该$.validator.setDefaults方法使用 Twitter 的 Bootstrap 为我解决了这个问题。我正在使用jquery.validate.js和jquery.validate.unobtrusive.js。

由于 DOM 就绪上的不显眼验证会扫描您的文档并为遇到的每个表单缓存不显眼的验证选项，因此需要$.validator.setDefaults在文档扫描发生之前调用该方法。

// setup defaults for $.validator outside domReady handler
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".clearfix").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest(".clearfix").removeClass("error");
    }
});

$(document).ready(function() {
       // do other stuff
});
于 2011-10-10T16:59:11.380 回答
4

遇到了同样的问题。我正在通过向 HtmlHelper 类添加和扩展来解决它。

这就是我为 ValidationSummary 所做的：

   public static class TwitterBootstrapHelperExtensions
    {
        public static MvcHtmlString BootstrapValidationSummary(this HtmlHelper helper,
                               bool excludePropertyErrors,
                               string message)
        {
            if(helper.ViewData.ModelState.Values.All(v => v.Errors.Count == 0)) return new MvcHtmlString(string.Empty);

            string errorsList = "<ul>";
            foreach (var error in helper.ViewData.ModelState.Values.Where(v => v.Errors.Count >0))
            {
                errorsList += string.Format("<li>{0}</li>", error.Errors.First().ErrorMessage);
            }
            errorsList += "</ul>";
            return new MvcHtmlString(string.Format("<div class=\"alert-message error\"><span>{0}</span>{1}</div>",message,errorsList));

        }
    }

在 .cshtml 文件中，我将 Html.ValidationSummary 替换为：

@Html.BootstrapValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

请记住在视图文件夹 web.config 文件中添加扩展类的命名空间。

如果我处理您之前的单个输入项，我稍后会在这里发布。高温高压

于 2011-09-01T18:26:21.170 回答
1

您可以通过将以下 javascript 添加到您的页面（查看）来将 MVC3 验证与 Bootstrap 框架集成

<script>
$(document).ready(function () {
/* Bootstrap Fix */
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest("div.control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest("div.control-group").removeClass("error");
    }
});
var current_div;
$(".editor-label, .editor-field").each(function () {
    var $this = $(this);
    if ($this.hasClass("editor-label")) {
        current_div = $('<div class="control-group"></div>').insertBefore(this);
    }
    current_div.append(this);
});
$(".editor-label").each(function () {
    $(this).contents().unwrap();
});
$(".editor-field").each(function () {
    $(this).addClass("controls");
    $(this).removeClass("editor-field");
});
$("label").each(function () {
    $(this).addClass("control-label");
});
$("span.field-validation-valid, span.field-validation-error").each(function () {
    $(this).addClass("help-inline");
});
$("form").each(function () {
    $(this).addClass("form-horizontal");
    $(this).find("div.control-group").each(function () {
        if ($(this).find("span.field-validation-error").length > 0) {
            $(this).addClass("error");
        }
    });
});
});
</script>

此外，在视图（例如“Create.cshtml”）上，确保表单中的字段格式如下...

    <div class="editor-label">
        @Html.LabelFor(Function(model) model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(Function(model) model.Name)
        @Html.ValidationMessageFor(Function(model) model.Name)
    </div>

使用此解决方案，只需添加 javascript 而无需编辑视图就足够了。

于 2012-12-14T14:47:57.657 回答
1

我更喜欢更改引导程序的 CSS。刚刚在正确的地方添加了 jQuery validate 的类。字段验证错误和输入验证错误

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}
于 2012-01-04T12:38:36.107 回答
1

与其重新发明这个特定的轮子，不如检查http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/上提供的 validationEngine 插件。

您可以根据需要自定义弹出元素，连接到 jQuery.validate.js 很简单。

于 2011-08-28T04:14:54.887 回答
0

我所做的是将 css 类用于验证错误，并创建一个具有相同类但具有引导值的新 css 文件。

您可以在以下 nuget 包中找到它：http: //nuget.org/List/Packages/MahApps.Twitter.Bootstrap

这也提供了一些脚手架模板来自动创建新视图。

于 2011-11-17T05:29:03.927 回答
0

我需要使用 Bootstrap 3.1 和 Razor 来解决这个问题。这是我使用的：

$.validator.setDefaults({
    highlight: function (element) {
        $(element).parents(".form-group").addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).parents(".form-group").removeClass("has-error");
    }
});

$(function () {

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

    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.form-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('has-error');
                }
            });
        }
        else {
            $(this).find('div.form-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).addClass('has-error');
                }
            });
        }
    });

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

这是@german 的回答和“theBraindonor”这篇文章的帮助的结合。更新为使用新的 Bootstrap 3 类。

于 2013-11-07T17:00:58.237 回答