Проверка MVC3: изменение класса элемента, если он недействителен

Question

Я использую проверку сервера и хочу изменить класс элемента, когда он недействителен.Так, например, у меня есть текстовое поле с сообщением проверки:

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

Когда данные текстового поля недопустимы, я хочу, чтобы текстовое поле получило красную рамку.Я попытался изменить его, используя селекторы css:

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

, поэтому, когда показывается сообщение проверки, текстовое поле получит класс «aftererror».К сожалению, элемент проверки также отображается, даже если данные верны, только текст отсутствует.

Так, как бы я изменил класс css в texbox при ошибке, или чтобы элемент проверки исчез при отсутствии ошибки?.

Answer 1

Это уже встроено в ASP.NET MVC.

Прочтите Сообщение Скотта Гу о проверке MVC .

По сути, фреймворк настроен на автоматическое добавление класса input-validation-error css к недопустимым полям.

Вот CSS, который я использую для добавления красной рамки и розоватого фона (это DotLess , поэтому не совсем то, как будет выглядеть CSS)

.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;
}

_{просто убедитесь, что вы также добавили jquery.validate.unobtrusive.js на свою страницу. Это помогает со всей проверкой совершенства}

Answer 2

В MVC4 это:

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

Answer 3

Классы .field-validation будут применяться к свойствам, но, вероятно, будут переопределены, вероятно,

input[type="text"] 

Установите стили .input-validation-error (NOT .field-validation-error)! Важно или избавиться от ввода [type = "text"] из таблицы стилей.