jquery - 使用 MVC 进行 Bootstrap 验证？

Question

我一直在查看以下网站 - http://bootstrapvalidator.com/getting-started/#release

我喜欢验证。我正在开发一个 MVC 5 应用程序，并且正在使用 bootstrap。我目前在我的模型上使用装饰器来触发验证。

e.e

[Required]
public string FirstName { get; set; }

我的标记如下:

    <div class="col-xs-5">
        @Html.TextBoxFor(model => model.FirstName, new { @class = "form-control input-sm" })
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>

模型上的另一个字段用于例如

年龄

[Range(0,150), ErrorMessage="Age field cannot be greater than 150"]
public int Age { get; set; }

因此，我希望将年龄错误消息注入(inject)到 toottip 中，而不是为我的应用程序中的每个页面重复验证服务器端和客户端

因此，如果用户尝试在未填写名字的情况下提交表单，则会触发验证消息。

我真正想要实现的是这样的 - http://bootstrapvalidator.com/settings/#form-container - 因此该字段会触发验证并将错误消息放入工具提示中 - 有人使用 MVC 做过类似的事情吗？有没有办法我们可以强制将服务器端验证消息注入(inject)到工具提示中出现的错误中？

更新

尝试使用下面的 @Tieson 答案 - 目前不起作用。我在包含百分比字段的页面上添加了样式，该字段只能包含 3 位数字。下载 bootstrap unobtrusice 扩展后我的捆绑配置如下:

        var thirdPartyScripts = new ScriptBundle("~/bundles/thirdpartyscripts").Include(
            "~/Scripts/modernizr-*",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            "~/Scripts/jquery.form.js",
            "~/Scripts/jquery.blockUI.js",
            "~/Scripts/jquery.autosize.min.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery.validate.unobtrusive.bootstrap.js",
            "~/Scripts/respond.js",
            "~/Scripts/kendo/kendo.web.min.js",
            "~/Scripts/kendo/kendo.aspnetmvc.min.js",
            "~/Content/ckeditor/ckeditor.js",
            "~/Content/ckeditor/adapters/jquery.js",
            "~/Scripts/knockout-3.1.0.js",
            "~/Scripts/knockout.mapping-latest.js");

        thirdPartyScripts.Orderer = new AsIsBundleOrderer();
        bundles.Add(thirdPartyScripts);

我的 View 模型中的百分比字段如下:

 [RegularExpression(@"^(?:999|[1-9]?[0-9]?[0-9])$", ErrorMessage = "Does this work")]
        public int Percentage{ get; set; }

我将更新添加到 bootstrap.js 文件，然后在 document.ready 函数中将更新添加到 setDefaults 验证。我看到的是，如果我在字段中输入有效数字(例如 50)，它不会突出显示绿色。如果我输入 4 位数字并远离字段，它会突出显示红色，但字段中没有包含会呈现工具提示错误消息的 X 图标，然后当我再次输入有效数据时，它不会从红色转回。我在 document.ready 验证器的 setDefaults 中的 showErrors 函数中放置了一个警报('此处')，但我没有看到它触发警报？

当我输入无效数据且字段变为红色时，屏幕上呈现的 html 为:

<input class="form-control input-validation-error text-danger" data-val="true" data-val-regex="Does this work" data-val-regex-pattern="^(?:999|[1-9]?[0-9]?[0-9])$" id="txtPercentage" name="Percentage" placeholder="Percentage" type="text" value="" aria-invalid="true">

我的cshtml标记如下:

            <div class="row form-group">
                @Html.LabelFor(m => m.Percentage, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.Percentage, new { @class = "form-control", @placeholder = "Percentage", id = "txtPercentage" })
                </div>
            </div>

我是否还需要在此处将 Tootip 添加到我的标记中？

Answer 1

可以重写 Default settings jQuery 验证器:

  <script type="text/javascript">
        $.validator.setDefaults({            
            showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();

                // If an element is valid, it doesn't need a tooltip
                $("." + this.settings.validClass).tooltip("destroy");

                // Add tooltips
                for (var i = 0; i < errorList.length; i++) {
                    var error = errorList[i];
                    $(error.element).tooltip({ trigger: "focus" }) // Activate the tooltip on focus
                                    .attr("data-original-title", error.message);
                }
            }
     });
 </script>

这里，errorList 为我们提供了所有未验证的元素。通过使用其 error.element 属性，我们可以将工具提示附加到该元素。