我一直在看以下站点-http://bootstrapvalidator.com/getting-started/#release
我喜欢验证。我正在开发MVC 5应用程序，并且正在使用引导程序。我目前在模型上使用Decorators触发验证。
ee
[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; }
因此，我希望将年龄错误消息注入toottip中，而不是为我的应用程序中的每个页面重复验证服务器端和客户端
因此，如果用户尝试提交未填写名字的表单，则会触发验证消息。
我真正想要实现的是这样的东西-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位数字并在远离字段的位置按Tab键，它的确会突出显示红色，但是该字段中没有包含X图标，该图标会显示工具提示错误消息，然后当我再次输入有效数据时，它不会从红色转回原位。我在document.ready的验证程序上的setDefaults中的showErrors函数中的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？
我发现结合SO的一些答案后，我可以使用Bootstrap的工具提示来代替内联验证消息，同时还可以使用.alert类的样式。
首先，我从以下答案调整了CSS：根据位置修改Twitter Bootstrap的工具提示颜色
/* INFO */
.tooltip.tooltip-info .tooltip-inner
{
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
background-image: -webkit-linear-gradient(top, #d9edf7 0, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0, #b9def0 100%);
background-repeat: repeat-x;
border-color: #9acfea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip.tooltip-info.top .tooltip-arrow,
.tooltip.tooltip-info.top-left .tooltip-arrow,
.tooltip.tooltip-info.top-right .tooltip-arrow
{
border-top-color: #bce8f1;
}
.tooltip.tooltip-info.bottom .tooltip-arrow,
.tooltip.tooltip-info.bottom-left .tooltip-arrow,
.tooltip.tooltip-info.bottom-right .tooltip-arrow
{
border-bottom-color: #bce8f1;
}
.tooltip.tooltip-info.right .tooltip-arrow
{
border-right-color: #bce8f1;
}
.tooltip.tooltip-info.left .tooltip-arrow
{
border-left-color: #bce8f1;
}
/* DANGER (ERROR) */
.tooltip.tooltip-danger .tooltip-inner
{
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
background-image: -webkit-linear-gradient(top, #f2dede 0, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%);
background-repeat: repeat-x;
border-color: #dca7a7;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip.tooltip-danger.top .tooltip-arrow,
.tooltip.tooltip-danger.top-left .tooltip-arrow,
.tooltip.tooltip-danger.top-right .tooltip-arrow
{
border-top-color: #ebccd1;
}
.tooltip.tooltip-danger.bottom .tooltip-arrow,
.tooltip.tooltip-danger.bottom-left .tooltip-arrow,
.tooltip.tooltip-danger.bottom-right .tooltip-arrow
{
border-bottom-color: #ebccd1;
}
.tooltip.tooltip-danger.right .tooltip-arrow
{
border-right-color: #ebccd1;
}
.tooltip.tooltip-danger.left .tooltip-arrow
{
border-left-color: #ebccd1;
}
/* WARNING */
.tooltip.tooltip-warning .tooltip-inner
{
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
background-image: -webkit-linear-gradient(top, #fcf8e3 0, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip.tooltip-warning.top .tooltip-arrow,
.tooltip.tooltip-warning.top-left .tooltip-arrow,
.tooltip.tooltip-warning.top-right .tooltip-arrow
{
border-top-color: #faebcc;
}
.tooltip.tooltip-warning.bottom .tooltip-arrow,
.tooltip.tooltip-warning.bottom-left .tooltip-arrow,
.tooltip.tooltip-warning.bottom-right .tooltip-arrow
{
border-bottom-color: #faebcc;
}
.tooltip.tooltip-warning.right .tooltip-arrow
{
border-right-color: #faebcc;
}
.tooltip.tooltip-warning.left .tooltip-arrow
{
border-left-color: #faebcc;
}
/* SUCCESS */
.tooltip.tooltip-success .tooltip-inner
{
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
background-image: -webkit-linear-gradient(top, #dff0d8 0, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%);
background-repeat: repeat-x;
border-color: #b2dba1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip.tooltip-success.top .tooltip-arrow,
.tooltip.tooltip-success.top-left .tooltip-arrow,
.tooltip.tooltip-success.top-right .tooltip-arrow
{
border-top-color: #d6e9c6;
}
.tooltip.tooltip-success.bottom .tooltip-arrow,
.tooltip.tooltip-success.bottom-left .tooltip-arrow,
.tooltip.tooltip-success.bottom-right .tooltip-arrow
{
border-bottom-color: #d6e9c6;
}
.tooltip.tooltip-success.right .tooltip-arrow
{
border-right-color: #d6e9c6;
}
.tooltip.tooltip-success.left .tooltip-arrow
{
border-left-color: #d6e9c6;
}
然后，我们添加Bootstrap Unobtrusive Validation插件：https ://www.nuget.org/packages/jquery.validate.unobtrusive.bootstrap/-这扩展了Unobtrusive Validation插件，以便将.has-error等等类添加到最接近.form-group的触发输入。
困扰我的是这一部分；我必须对此进行一些修改bootstrap.js文件：
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
对此：
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.addClass(this.$element.data('tooltip'))
它可以让工具提示插件读取data-定义要应用哪种工具提示样式的属性。
最后，稍微修改验证器设置：
$.validator.setDefaults({
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();
// destroy tooltips on valid elements
$("." + this.settings.validClass).tooltip("destroy");
// add/update tooltips
for (var i = 0; i < errorList.length; i++) {
var error = errorList[i];
var id = '#' + error.element.id;
var isInModal = $(id).parents('.modal').length > 0;
$(id)
.tooltip({ trigger: 'focus', placement: isInModal ? 'auto right' : 'right', container: isInModal ? false : '.row', html: true })
.attr('data-tooltip', 'tooltip-danger')
.attr('data-original-title', error.message);
}
}
});
我使用的版本与@VahidN建议的版本略有不同。我有时会使用模式来显示输入表单，并且将容器应用于工具提示无法在模式中正确呈现。但是，如果您的输入可能在.input-group中使用，则容器是必需的，因此我只使用最近的.row。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句