我正在使用 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 注入(inject)“错误”类，就像我在第一个输入中硬编码一样。 (所以在进入页面时，div 会有一个“clearfix”类，但如果该输入 block 验证失败，它会将其标记为“clearfix 错误”)。我想我将不得不更新 div block 以包含某种 id，并且可能向 ValidationMessage 添加一个新的数据属性。扩展 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 作为目标。现在我只需要弄清楚如何拦截验证消息。

最佳答案

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

关于asp.net-mvc-3 - 在 MVC3 中扩展不显眼的 javascript 以向 div 客户端添加样式的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7215477/