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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With