How to apply bootstrap v4 alpha's form input validation classes with ASP.NET Razor syntax?

Question

So, bootstrap v4 alpha has changed form validation classes a bit. Now, to apply validation styles to a form input, you apply the CSS class to the parent div.form-group.

I'm writing a website using ASP.NET MVC4, and am trying to figure out how to apply this CSS class to a parent HTML element.

For example, here's my current HTML for a form input element ...

<div class="form-group">
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password)
</div>

If my view's model has a validation error for the Password field, it'll get a corresponding bit of text below the input field. That's what that ValidationMessageFor call does.

But, with bootstrap v4, I need to apply a has-danger class to the parent div.form-group. It'd need to look like so ...

<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>

But, I only want to apply that if there is a validation message for the password field.

Any idea how to achieve this with Razor?

tmg · Accepted Answer · 2017-06-06 10:49:34Z

4

You can create an HtmlHelper that checks ModelState and returns an error class:

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);
    }
}

Simple usage:

<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>

or

<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>

answered Jun 6, 2017 at 10:49

tmg

20.6k5 gold badges75 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Over a year ago

Very cool idea! I've never thought about doing this sort of thing. Thanks.

Collectives™ on Stack Overflow

How to apply bootstrap v4 alpha's form input validation classes with ASP.NET Razor syntax?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related