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

Данное руководство устарело. Актуальное руководство: Руководство по 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 мы можем найти секцию, которая как раз и отвечает за стилизацию:

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

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

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

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

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

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

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

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