Tag-хелперы валидации

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

ValidationMessageTagHelper

Для валидации на стороне клиента применяется класс ValidationMessageTagHelper. Данный tag-хелпер используется с помощью применения к элементу <span > атрибута asp-validation-for:

<label asp-for="Name"></label>
<input type="text" asp-for="Name" />
<span asp-validation-for="Name"></span>

Атрибут asp-validation-for в качестве значения принимает название свойства модели, для которого будет выводиться сообщение об ошибке валидации.

Данный элемент span будет генерировать следующую разметку:

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

ValidationSummaryTagHelper

ValidationSummaryTagHelper применяется для отображения сводки ошибок валидации. Он применяется к элементу div в виде атрибута asp-validation-summary:

<div class="validation" asp-validation-summary="ModelOnly"/>

В качестве значения атрибут asp-validation-summary принимает одно из значений перечисления ValidationSummary:

• None: ошибки валидации не отображаются

• ModelOnly: отображаются только ошибка валидации уровня модели, ошибки валидации для отдельных свойств не отображаются

• All: отображаются все ошибки валидации

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

<div class="validation validation-summary-valid" data-valmsg-summary="true">
	<ul>
		<li style="display:none"></li>
	</ul>
</div>

При возникновении ошибок в список ul добавляются все сообщения об ошибках.

Теперь применим оба тег-хэлпера. Допустим, мы создаем объект следующей модели Person:

public class Person
{
	[Required(ErrorMessage = "Не указано имя")]
	public string Name { get; set; }
	
	[Required(ErrorMessage = "Не указан электронный адрес")]
	[EmailAddress(ErrorMessage = "Некорректный электронный адрес")]
	public string Email { get; set; }
	
	[Required(ErrorMessage = "Не указан пароль")]
	public string Password { get; set; }
	
	[Required(ErrorMessage ="Не указан возраст")]
	[Range(1, 100)]
	public int Age { get; set; }
}

Пусть в контроллере для создания объекта Person предусмотрено действие Create:

public IActionResult Create()
{
	return View();
}
[HttpPost]
public IActionResult Create(Person person)
{
	if (ModelState.IsValid)
		return Content($"{person.Name} - {person.Email}");

	return View(person);
}

Полная форма для создания этого объекта могла бы выглядеть так:

@model ValidationApp.Models.Person

<form asp-antiforgery="true" asp-action="Create" asp-controller="Home">
    <div>
        <div class="validation" asp-validation-summary="All"></div>
        <div>
            <label asp-for="Name"></label><br />
            <input type="text" asp-for="Name" />
            <span asp-validation-for="Name"></span>
        </div>
        <div>
            <label asp-for="Email"></label><br />
            <input asp-for="Email" />
            <span asp-validation-for="Email"></span>
        </div>
        <div>
            <label asp-for="Password"></label><br />
            <input asp-for="Password" />
            <span asp-validation-for="Password"></span>
        </div>
        <div>
            <label asp-for="Age"></label><br />
            <input asp-for="Age" />
            <span asp-validation-for="Age"></span>
        </div>
        <div>
            <input type="submit" value="Save" />
        </div>
    </div>
</form>


@section scripts{

    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

И в случае некорректного ввода отобразятся ошибки валидации: