Валидация на стороне клиента

Кроме валидации на стороне сервера с помощью свойства ModelState в ASP.NET Core MVC можно применять валидацию на стороне клиента, то есть на веб-странице. Валидация на стороне клиента позволяет уменьшить количество обращений к серверу и произвести все действия по проверке значений непосредственно при вводе данных.

Для определения валидации на стороне клиента необходимо подключить в представлении специальные скрипты валидации:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>

Прежде всего это скрипт jquery, от которого зависят другие скрипты. Второй скрипт - плагин валидации Jquery Validate. Третий скрипт - библиотека jQuery Unobtrusive Validation дополняет скрипт валидации, добавляя поддержку data-атрибутов. Актуальная версия всех этих скриптов в будущем может может отличаться от приведенной.

Для рассмотрения валидации на стороне клиента возьмем самый простейший проект ASP.NET Core по типу по типу ASP.NET Core Empty. Пусть весь проект будет выглядеть следующим образом:

В папке Models есть следующий класс Person:

using System.ComponentModel.DataAnnotations;

namespace MvcApp.Models
{
    public class Person
    {
        [Required]
        public string? Name { get; set; }
        [Required]
        public int Age { get; set; }
    }
}

Здесь каждое свойство модели помечено атрибутом Required, которое требует обязательного наличия значений.

Также пусть в проекте имеется папка Controllers с контроллером HomeController со следующим кодом:

using Microsoft.AspNetCore.Mvc;
using MvcApp.Models;  // пространство имен класса Person

namespace MvcApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Create() => View();

        [HttpPost]
        public string Create(Person person)
        {
            if (ModelState.IsValid)
                return $"{person.Name} - {person.Age}";
            return "Данные не прошли валидацию";
        }
    }
}

Первый метод Create будет обрабатывать Get-запросы и будет отдавать пользователю представление с формой для добавления данных.

Post-метод Create получает введенные данные в виде модели Person и проверяет их корректность и в зависимости от результата выводит определенные данные.

И для метода Create в папке Home/Create есть представление Create.cshtml, которое будет содержать форму для ввода данных:

@model MvcApp.Models.Person
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<form method="post">
    <div>
        <p>
            <label asp-for="Name">Name</label><br />
            <input type="text" asp-for="Name" />
            <span asp-validation-for="Name" />
        </p>
        <p>
            <label asp-for="Age">Age</label><br />
            <input asp-for="Age" />
            <span asp-validation-for="Age" />
        </p>
        <p>
            <input type="submit" value="Send"  />
        </p>
    </div>
</form>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>

Данное представление является строго типизированным - в качестве модели оно использует класс Person. А в самом конце файла подключаются все необходимые скрипты из CDN. Но естественно скрипты можно загрузить локально в проект и подключать их из проекта.

В самом представлении определена форма ввода данных, для создания которой применяются tag-хелперы. Для отображения ошибок валидации в ASP.NET Core MVC применяются tag-хелперы валидации. При каждом свойстве мы используем хелпер валидации <span asp-validation-for="[Название свойства]" />.

Например, tag-хелпер

<span asp-validation-for="Name" />

как раз представляет хелпер валидации или ValidationMessageTagHelper (а не элемент <span>). Атрибуту asp-validation-for передается название свойства (в данном случае свойства Name), для которого будет выводиться сообщение, если свойство не проходит валидацию.

Например, возьмем группу tag-хелперов, которые предназначены для свойства Name:

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

Поскольку к свойству Name применяется атрибут [Required], который требует обязательного наличия значения, то в итоге эта группа хелперов сгенерирует следующую разметку:

<label for="Name">Name</label><br />
<input type="text" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" />
 <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true" />

Если мы запустим проект, ничего не введем в форму ввода и сразу нажмем на кнопку отправки, то данные даже не отправяттся на сервер, а рядом с полями ввода мы увидим сообщения об ошибках:

Таким образом, валидация на стороне клиента позволит уменьшить нагрузку на сервер. Тем не менее стоит учитывать, что на стороне клиента по тем или иным причинам может быть отключен javascript, либо данные отправляются в среде, где эти скрипты не применяются. Соответственно валидация на стороне сервера по прежнему актуальна. Кроме того, на стороне сервера могут проводиться дополнительные проверки, которые не могут быть выполнены на стороне клиента.

Стоит отметить, что при валидации нередко данные с ошибками возвращаются обратно клиенту. В этом случае мы можем передавать некорректную модель обратно в представление:

public IActionResult Create() => View();

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