📄 pbForm: Быстрая и надёжная обработка форм

pbForm — это готовый класс для удобной AJAX-валидации и отправки форм на клиенте. Он интегрируется с pbFetch и автоматически обрабатывает ошибки, сообщения и редиректы.

✨ Основные возможности

• Перехватывает отправку форм: предотвращает стандартный submit и отправляет данные через pbFetch с использованием FormData.
• Обрабатывает ошибки полей: если API возвращает ошибки валидации (например, { errors: { email: "Некорректный email" } }), класс добавляет CSS-классы к полям и выводит сообщения.
• Поддерживает кастомные элементы: можно использовать data-error="name" и data-custom="name" для гибкой разметки.
• Автоочистка ошибок: убирает старые ошибки при повторном вводе или после успешной отправки.
• Поддержка редиректа: если сервер возвращает redirect, форма автоматически перенаправит пользователя.
• Настройка CSS-классов: классы ошибок и сообщений можно задать через опции конструктора или системные настройки.

⚙️ Как использовать

1️⃣ Добавить атрибут pb-form форме

<form action="/api/register" method="POST" pb-form>
  <input name="email">
  <span data-error="email"></span>

  <button type="submit">Отправить</button>
</form>

2️⃣ Инициализировать класс

При включённой системной настройке pageblocks_load_scripts всё запускается автоматически. Если нужно вручную:

<script src="/assets/components/pageblocks/js/web/pb.fetch.v280.js"></script>
<script src="/assets/components/pageblocks/js/web/pb.form.v280.js"></script>
<script>
  pbFetch.init();
  new pbForm('form[pb-form]', {
    errorClass: 'is-invalid',
    errorMessageClass: 'invalid-feedback'
  });
</script>

Опции:

• errorClass: CSS-класс для невалидных полей.
• errorMessageClass: CSS-класс для блока с сообщением об ошибке.

По умолчанию они берутся из системных настроек:

• pageblocks_field_error — класс для поля с ошибкой (по умолчанию is-invalid).
• pageblocks_field_msg_error — класс для текста ошибки (по умолчанию invalid-feedback).

3️⃣ Пример реальной формы с Bootstrap 5

<form class="border rounded-4 p-5" action="/login" method="post" pb-form>
  <input type="hidden" name="_token" value="{csrf_token}">
  <input type="hidden" name="honeypot" value="">

  {if $success_message}
    <p class="text-center text-success" pb-message>{$success_message}</p>
  {elseif $error_message}
    <p class="text-center text-danger text-error" pb-message>{$error_message}</p>
  {else}
    <p class="text-center d-none" pb-message></p>
  {/if}

  <div class="form-group mb-3">
    <label for="username" class="mb-2">Имя</label>
    <input type="text"
           name="username"
           id="username"
           class="form-control{if $errors.username} is-invalid{/if}"
           value="{$old_input.username}">
    <span class="invalid-feedback" data-error="username">{$errors.username}</span>
  </div>

  <div class="form-group mb-3">
    <label for="password" class="mb-2">Пароль</label>
    <input type="password"
           name="password"
           id="password"
           class="form-control{if $errors.password} is-invalid{/if}">
    <span class="invalid-feedback" data-error="password">{$errors.password}</span>
  </div>

  <button type="submit" class="btn btn-dark w-100">
    <span class="spinner spinner-border spinner-border-sm" 
          pb-spinner 
          aria-hidden="true" 
          style="display:none">
    </span> 
    <span role="status">Войти</span>
  </button>
</form>

🔍 Особенности примера

• ✅ Используется <p pb-message> для вывода общего сообщения об успехе или ошибке.
• ✅ Для полей ошибок применяется data-error="name" и CSS-классы, указанные в системных настройках (field_error и field_msg_error).
• ✅ Кнопка отправки автоматически блокируется на время запроса, а внутри неё отображается спиннер с атрибутом pb-spinner для удобной индикации загрузки.

🔧 Индивидуальные формы с другими классами

Можно инициализировать формы с другими селекторами и своими классами ошибок:

new pbForm('.custom-ajax-form', {
  errorClass: 'has-error',
  errorMessageClass: 'field-error'
});

🗂 Системные настройки по умолчанию

Настройка	Значение по умолчанию	Описание
pageblocks_field_error	is-invalid	Класс для поля с ошибкой
pageblocks_field_msg_error	invalid-feedback	Класс для блока сообщения об ошибке
pageblocks_msg_success	text-success	Классы для успешного общего сообщения
pageblocks_msg_error	text-error,text-danger	Классы для общего сообщения об ошибке
pageblocks_hidden_class	d-none	Класс для скрытия блока сообщений

✅ Итог

pbForm — это простая и гибкая основа для AJAX-форм с авто-валидацией и обработкой ошибок. Добавьте атрибут pb-form, настройте системные параметры и форма будет готова к работе без лишнего JS.