因此,Bootstrap V4 Alpha已更改了表单验证类。现在,要将验证样式应用于表单输入,请将CSS类应用于父 div.form-group
。
我正在使用ASP.NET MVC4编写网站,并试图弄清楚如何将此CSS类应用于父元素。
例如,这是我当前的html for表单输入元素...
<div class="form-group">
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password)
</div>
如果我的视图模型在Password
字段中具有验证错误,则它将在输入字段下方获得相应的文本。这就是ValidationMessageFor
呼叫所做的。
但是,使用Bootstrap V4,我需要将has-danger
类应用于父 div.form-group
。它需要看起来像...
<div class="form-group has-danger">
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password)
</div>
但是,我只想在密码字段有验证消息时应用。
任何想法如何用剃须刀实现这一目标?
您可以创建一个检查ModelState
并返回错误类的HtmlHelper
:
public static class HtmlHelperExtensions
{
public static string FieldHasError(this HtmlHelper helper, string propertyName, string errorClass = "has-danger")
{
if (helper.ViewData.ModelState != null && !helper.ViewData.ModelState.IsValidField(propertyName))
{
return errorClass;
}
return string.Empty;
}
public static string FieldHasError<TModel, TEnum>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TEnum>> expression, string errorClass = "has-danger")
{
var expressionString = ExpressionHelper.GetExpressionText(expression);
var modelName = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expressionString);
return FieldHasError(helper, modelName, errorClass);
}
}
简单用法:
<div class="form-group @Html.FieldHasError("Password")">
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password)
</div>
或
<div class="form-group @Html.FieldHasError(m => m.Password)">
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Password)
</div>