CODEWITHSUNDEEP
.netasp.net-mvc-3css-selectors
redrobot
redrobot

Reputation: 979

MVC3 Validation: Change element class when invalid

I'm using server validation and want to change the element class when invalid. So for example I have a textbox with a validationmessage:

@Html.ValidationMessageFor(m => m.FirstName, new {@class = "error"})
@Html.TextBoxFor(m => m.FirstName, new {@class = "aftererror"})

When the textbox data is invalid I want the textbox to get a red border. I tried to change it using css selectors:

 .error + .aftererror
    {   
        border:solid 1px red;
        }

so when the validationmessage is showing, the textbox would get the "aftererror" class. Unfortunately the validation element is also showing even if the data is valid, only there is no text.

So how would I change the css class of the texbox on error, or have the validation element disappear when there's no error.

Upvotes: 5

Views: 10537

Answers (3)

formatc
formatc

Reputation: 4323

In MVC4 it is:

.input-validation-error
{
     border: 1px solid red !important;
}

Upvotes: 4

stuartdotnet
stuartdotnet

Reputation: 3034

The .field-validation classes will apply to properties, but are likely being overridden, probably by 

input[type="text"]

Set the styles of .input-validation-error (NOT .field-validation-error) to !important or get rid of input[type="text"] from the stylesheet.

Upvotes: 0

Chase Florell
Chase Florell

Reputation: 47367

This is already built into ASP.NET MVC.

Take a read through Scott Gu's blog post on MVC Validation.

Basically the framework is setup to automagically add a input-validation-error css class to invalid fields.

Here's the CSS I use to add the red border and pinkish background (it's DotLess so not exactly what the CSS will look like)

.field-validation-error
{
    color: @valid-dark;
}

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

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    border: 1px solid @valid-dark ;
    background-color: @valid-light;
    font-size:100%;
}

.validation-summary-errors
{
    font-weight: bold;
    color: @valid-dark;
    ul{
        display: none;
    }
}

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

just make sure you also have the jquery.validate.unobtrusive.js added to your page. It helps with all the validation goodness

Upvotes: 12

Related Questions