Override CSS ValidationMessageFor

Question

I can't seem to manage to put a new css in a validationMessageFor in my Ajax form...

 @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", OnSuccess = "Success", OnFailure = "Fail" }))
{

<div class="separaror">
    <div class="line1">
        @Html.LabelFor(m => m.Name)
        <br />
        @Html.TextBoxFor(m => m.Name)

            @Html.ValidationMessageFor(m => m.Name)

    </div>

    <div class="linha2">
        <br>
        <input type="submit" value="Save" />
        <input type="button" id="btnCancel" value="Cancel" />
    </div>
</div>

}

My css

.field-validation-error {
color: #e80c4d;
font-weight: bold;
}

.field-validation-valid {
display: none;
}

input.input-validation-error {
border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
border: 0 none;
}

.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}

.validation-summary-valid {
display: none;
}

It doesn't override.. Why is that? Any help would be appreciated! I copied the css directly from the default Asp MVC 4 application from visual studio, I have no idea why this doesnt work. The application I'm doing is not the default application from mvc 4, so there must be something I'm missing

Karthik Chintala · Accepted Answer · 2013-08-08 14:56:41Z

3

You need to set .input-validation-error for validation for inputs

This is how you do it

.input-validation-error{ background: pink; border: 1px solid red; }

If you style up the .field-validation-error it will change the validation error message(s).

.field-validation-error{ color: red; font-weight: bold; }

Hope it helps

answered Aug 8, 2013 at 14:56

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

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

2 Comments

Victor Franchi Over a year ago

I put this css , but it's not overriding the validationMessageFor and textBoxFor on the form, there's something elso to be done?

Victor Franchi Over a year ago

The only problem is that It has to be on the same file of the form.. that's weird

Collectives™ on Stack Overflow

Override CSS ValidationMessageFor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related