Типы валидации

Unpoly предоставляет несколько типов валидации, которые могут быть использованы для проверки данных на клиентской стороне до их отправки на сервер. Основной задачей валидации является предотвращение отправки некорректных данных, улучшение пользовательского опыта и минимизация ошибок при работе с сервером. В Unpoly процесс валидации интегрирован с механиками обновлений контента на странице, что позволяет создавать динамичные и отзывчивые интерфейсы.

1. Валидация на основе атрибутов HTML

Unpoly поддерживает использование стандартных HTML-атрибутов для валидации данных на клиенте. Эти атрибуты позволяют сразу же ограничить вводимые данные, без необходимости написания дополнительного JavaScript-кода.

  • required — этот атрибут позволяет обозначить обязательные поля в формах. Если пользователь оставляет такое поле пустым, форма не отправляется.
  • minlength и maxlength — используются для задания минимальной и максимальной длины текста в поле ввода.
  • pattern — атрибут для задания регулярного выражения, которому должны соответствовать вводимые данные.
  • type — атрибут, определяющий тип данных, который должен быть введен. Например, type="email" проверяет, что введенные данные соответствуют формату email-адреса.

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

2. Валидация с помощью JavaScript

Unpoly предоставляет возможности для выполнения более сложных проверок с использованием JavaScript. Такие проверки можно интегрировать в форму с помощью событий, таких как submit или change. Валидация на стороне клиента может быть выполнена с использованием стандартных методов, таких как setCustomValidity для задания кастомных сообщений об ошибках.

let input = document.querySelector('input[name="email"]');
input.addEventListener('input', function(event) {
    if (!input.validity.valid) {
        input.setCustomValidity('Пожалуйста, введите правильный email');
    } else {
        input.setCustomValidity('');
    }
});

Для интеграции с Unpoly можно использовать метод up.form.validate, который выполняет валидацию формы и возвращает результаты. В случае ошибок, Unpoly может автоматически обновить только те части страницы, которые требуют исправлений.

3. Валидация через сервер

Unpoly предлагает возможность выполнить валидацию на серверной стороне, возвращая ошибки и исправления непосредственно в динамически обновляемые участки страницы. Например, в случае неправильных данных при отправке формы, сервер может вернуть ошибку валидации и обновить страницу, отображая эти ошибки в соответствующих полях.

Чтобы интегрировать серверную валидацию, можно использовать метод up.form.submit с опцией validate: true. При этом, если сервер возвращает ошибки, Unpoly автоматически обновит DOM, заменив поля с ошибками.

Пример:

up.form.submit({
    url: '/submit-form',
    method: 'POST',
    validate: true
});

Если сервер возвращает ошибки, они будут автоматически отображены рядом с полями ввода. Это позволяет использовать серверные механизмы для сложной логики валидации (например, проверка уникальности email в базе данных).

4. Асинхронная валидация

Асинхронная валидация используется для проверки данных, которые требуют обращения к серверу или внешнему API. Примером может служить валидация поля, которое проверяет, существует ли уже такой email или имя пользователя в базе данных. Unpoly поддерживает асинхронные запросы и обновления интерфейса на основе их результатов.

Для асинхронной валидации можно использовать событие up:validate в сочетании с серверными запросами.

Пример асинхронной валидации email:

document.querySelector('input[name="email"]').addEventListener('input', function(event) {
    let email = event.target.value;

    // Запрос на сервер для проверки уникальности email
    fetch(`/validate-email?email=${email}`)
        .then(response => response.json())
        .then(data => {
            if (!data.valid) {
                event.target.setCustomValidity('Этот email уже занят.');
            } else {
                event.target.setCustomValidity('');
            }
        });
});

В случае асинхронных проверок Unpoly позволяет динамически обновлять интерфейс, подсказывая пользователю о состоянии ввода, например, показывая сообщение о том, что email уже существует.

5. Валидация через упрощенные формы и упрощенные API

В Unpoly также можно использовать простые механизмы валидации для базовых форм. Например, можно настроить автоматическую валидацию для формы при её отправке, используя встроенные средства Unpoly. Для этого достаточно добавить атрибут validate к форме:

<form up-validate="true" action="/submit-form">
    <input type="email" name="email" required>
    <button type="submit">Отправить</button>
</form>

В этом случае, при отправке формы, Unpoly проверяет все поля с атрибутом required, а также любые поля, использующие HTML5 валидацию (например, с атрибутами type="email"). Если данные не проходят валидацию, форма не отправляется, и пользователь увидит стандартные сообщения об ошибках.

6. Работа с динамически добавляемыми элементами

Одной из особенностей Unpoly является работа с динамически добавляемыми элементами на страницу, такими как новые формы или поля, которые добавляются после первоначальной загрузки. Unpoly позволяет выполнять валидацию таких элементов без дополнительного вмешательства, обновляя страницу или форму только там, где это необходимо.

Для этого важно следить за тем, чтобы новые элементы содержали все нужные атрибуты для валидации (например, required, pattern или minlength). После добавления новых элементов Unpoly автоматически интегрирует их в систему валидации, выполняя проверки при необходимости.

7. Ошибки и их отображение

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

Для отображения ошибок можно использовать атрибуты, такие как up-target, которые определяют, где должны появляться сообщения об ошибках.

Пример:

<form up-target="#error-container" action="/submit-form">
    <input type="email" name="email" required>
    <button type="submit">Отправить</button>
</form>

<div id="error-container"></div>

В данном примере все ошибки валидации будут отображаться в контейнере с ID error-container.

8. Обработка ошибок с использованием кастомных сообщений

Unpoly позволяет использовать кастомные сообщения об ошибках для более удобного взаимодействия с пользователем. Для этого можно использовать функцию setCustomValidity, которая позволяет задать уникальные сообщения для каждого поля ввода.

Пример:

let input = document.querySelector('input[name="phone"]');
input.addEventListener('input', function(event) {
    let phoneNumber = input.value;

    if (!phoneNumber.match(/^\+?[0-9]{1,15}$/)) {
        input.setCustomValidity('Введите корректный номер телефона');
    } else {
        input.setCustomValidity('');
    }
});

Это решение позволяет отображать персонализированные сообщения и улучшать UX для пользователя, помогая ему понять, что именно не так с введенными данными.

Использование различных типов валидации в Unpoly позволяет создать гибкую и отзывчивую форму, которая обеспечивает как качественную проверку данных, так и улучшенный пользовательский опыт. С помощью интеграции клиентской и серверной валидации можно достичь высокого уровня безопасности и надежности веб-приложений.

Оглавление