Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 564
redrobot Avatar asked Apr 11 '11 17:04

redrobot


2 Answers

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

like image 164
Chase Florell Avatar answered Nov 06 '22 18:11

Chase Florell


In MVC4 it is:

.input-validation-error
{
     border: 1px solid red !important;
}
like image 21
formatc Avatar answered Nov 06 '22 17:11

formatc