Styling Html.ValidationMessageFor with Bootstrap3

Question

I'm trying to style my @HTML.ValidationMessageFor element with Bootstrap 3 but no CSS is applied. When consulting Bootstrap's documentation, it states:

To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Even after nesting the desired @Html.ValidationMessageFor as stated above, no styling is applied:

ValidationMessageForError

Please see my code snippets below:

Model Property:

[Range(0, int.MaxValue, ErrorMessage = "Client ID cannot be larger than 2147483647.")]
[RegularExpression(@"^[0-9]+$", ErrorMessage = "Client ID must be a positive number.")]
public int searchClientID { get; set; }

View:

<div class="form-group col-sm-4">
    <div class="input-group">
        <span class="input-group-addon" id="client-ID">Client ID</span>
        @Html.TextBoxFor(m => m.searchClientID, new { @class = "form-control" })
    </div>
    <div class="has-error">
        @Html.ValidationMessageFor(m => m.searchClientID, null, new { @class = "has-error" })
    </div>
</div>

EDIT WITH ANSWER:

<div class="has-error">
    @Html.ValidationMessageFor(m => m.searchClientName, String.Empty, new { @class = "help-block" })
</div>

@PavanTeja I've tried replacing the div's class from form-group to has-error and it didn't change the styling at all. I tried applying the has-error class to both the div and the razor markup but it had no difference. — Sean
– Sean, Commented Feb 24, 2016 at 14:13

Pavan Teja · Accepted Answer · 2016-02-24 14:24:58Z

5

dont replace form-group with has-error.I have used something similar to this recently and try the following markup.

            <div class="form-group has-error">
                <div >
                    @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                </div>
                @Html.LabelFor(m => m.ConfirmPassword, new { @class = "control-label" })
                @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "help-block" })


            </div>

edited Feb 24, 2016 at 14:24

answered Feb 24, 2016 at 14:19

Pavan Teja

3,2021 gold badge18 silver badges22 bronze badges

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

1 Comment

Sean Over a year ago

I left the has-error class for the div element and added the help-block class to the @Html.ValidationMessageFor HTML helper. This worked perfectly! Thank you very much.

Collectives™ on Stack Overflow

Styling Html.ValidationMessageFor with Bootstrap3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related