Отображение ошибок валидации

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Для отображения сообщений об ошибках при валидации модели мы можем использовать хелпер Html.ValidationSummary:

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Author)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Author)
            @Html.ValidationMessageFor(model => model.Author)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Year)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Year)
            @Html.ValidationMessageFor(model => model.Year)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>

}

В данном случае сообщения об ошибках выводятся над полями для ввода значений свойств:

Но данный хелпер имеет перегруженные версии, которые помогают настроить более точное отображение сообщений об ошибках:

Перегруженная версия	Описание
Html.ValidationSummary()	Отображает общий список ошибок сверху
Html.ValidationSummary(bool)	Если параметр равен true, то вверху будут отображаться только сообщения об ошибках уровня модели, а специфические ошибки будут отображаться рядом с полями ввода. Если же параметр равен false, то вверху отображаются все ошибки.
Html.ValidationSummary(string)	Данная перегруженная версия хелпера отображает перед списком ошибок сообщение, которое передается в параметр string
Html.ValidationSummary(bool, string)	Сочетает две предыдущие перегруженные версии

Также мы можем использовать хелпер Html.ValidationMessageFor для вывода сообщения об ошибке для отдельного свойства, причем рядом с полем для ввода свойства, а не в сводке ошибок сверху:

@Html.ValidationSummary(true)

<div class="editor-label">
    @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Name)
	@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="editor-label">
     @Html.LabelFor(model => model.Author)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Author)
	@Html.ValidationMessageFor(model => model.Author)
</div>

Стилизация ошибок

Еще один важный момент отображения ошибок - это их стилизация. То, что мы видим ошибки в красном цвете и границы полей ввода также в красном цвете, не жестко установлено, и мы все это можем изменить. В файле стилей Site.css в проектах, созданных по шаблону Basic и Internet Application, мы можем найти секцию стилей, которая как раз и отвечает за стилизацию (при использования проекта по типу Empty нам самим придется добавить стили):

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

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

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

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

Это классы используются полями, генерируемыми хелперами валидации. И изменяя данные стили, мы можем управлять отображением ошибок. Итак, изменим два стиля - стиль класса .field-validation-error (он управляет отображением ошибок рядом с текстовыми полями) и стиль класса стиль класса .input-validation-error, который управляет отображением поля ввода в режиме ошибки:

.field-validation-error {
    color: #6699CC;
    font-weight:bold;
    text-decoration:underline;
}

.input-validation-error {
    border: 1px solid #006699;
    background-color: silver;
}

В итоге при возникновении ошибок валидации мы увидим следующую картину: