【发布时间】：2014-08-22 23:04:21
【问题描述】：
我一直在看以下网站 - http://bootstrapvalidator.com/getting-started/#release
我喜欢验证。我正在开发一个 MVC 5 应用程序，我正在使用引导程序。我目前在我的模型上使用装饰器来触发验证。
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; }
所以我希望将年龄错误消息注入到提示中，而不是为我的应用程序中的每个页面重复验证服务器端和客户端
因此，如果用户尝试在没有填写 FirstName 的情况下提交表单，验证消息将被触发。
我真正想要实现的是这样的 - http://bootstrapvalidator.com/settings/#form-container - 所以该字段会触发验证并将错误消息放入 ToolTip - 有没有人用 MVC 做过类似的事情，有没有办法我们可以强制将服务器端验证消息注入到将出现在该工具提示中的错误中？
更新
尝试使用下面的@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);
我的视图模型中的百分比字段为：
[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 函数中放置了一个警报（'here'），但我没有看到它触发警报？
当我输入无效数据并且该字段变为红色时，屏幕上呈现的 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>
我是否也需要在此处向我的标记添加提示？
【问题讨论】：
-
您是否包含了 Validator js 库？如果是，那么您必须知道表单的 HTML ID 是什么。您可以在@Html.BeginForm() 中设置它，然后在页面末尾：$('#YourFormID').bootstrapValidator();与您的自定义错误消息相关：您可以使用 HTML5 中的数据属性来显示您想要的消息
-
我想一个选项就是编写 js 来验证表单客户端，仍然保留服务器端验证并在验证摘要中呈现任何进一步的服务器端错误...
-
是的，在客户端和服务器端验证您的输入始终是一个好习惯，因为如果有人对 JavaScript 足够好并且他们想要损害您的网站，他们可以跳过客户端验证使用 FireBug。
-
@DawoodAwan - 是的，或者他们可以在浏览器中关闭 js :) - 我想我想要避免的是必须在 js 和服务器端重复验证 - 例如年龄字段我正在尝试查看是否有一种方法可以配置引导验证器以获取此错误消息，？
-
我还不确定，但我认为你可以使用 @Html.ValidationMessageFor() stackoverflow.com/questions/19281415/…
标签： jquery asp.net-mvc twitter-bootstrap validation twitter-bootstrap-3