在MVC3中扩展不显眼的javascript以向div客户端添加样式的最佳方法

Question

我正在使用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.现在我只需要弄清楚如何拦截验证消息.

Answer 1

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

Answer 2

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

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