Сериализация форм

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

В Bliss.js ключевой метод для этого — bliss.forms.serialize(form). Он принимает объект формы и возвращает объект, где ключи соответствуют именам полей, а значения — их содержимому.

let form = document.querySelector('#userForm');
let data = bliss.forms.serialize(form);
console.log(data);

В результате получится объект:

{
  username: "ivan",
  email: "ivan@example.com",
  newsletter: "on"
}

Особенности работы с различными типами полей

Текстовые поля (<input type="text">, <textarea>) Значения берутся напрямую из свойства value. Пустые строки сохраняются как пустые значения.

Чекбоксы (<input type="checkbox">) Если чекбокс отмечен, в объекте появляется его value. Если не отмечен — ключ может отсутствовать, что важно учитывать при обработке данных на сервере.

Радиокнопки (<input type="radio">) Сериализация учитывает только выбранную опцию в группе радиокнопок. Несовпадение имени или отсутствие выбора приводит к отсутствию ключа в объекте.

Списки (<select> и <select multiple>)

  • Для одиночного выбора возвращается строка с выбранным значением.
  • Для множественного выбора — массив выбранных значений.
let data = bliss.forms.serialize(form);
// Пример для multiple select
// { interests: ["music", "books"] }

Преобразование сериализованных данных

Bliss.js позволяет сразу работать с объектом, но часто требуется трансформация данных перед отправкой. Например, числовые значения полей можно привести к типу Number:

let formData = bliss.forms.serialize(form);
formData.age = Number(formData.age);

Также можно фильтровать или переименовывать ключи:

let cleanData = {};
for (let key in formData) {
  if (formData[key] !== "") {
    cleanData[key.toUpperCase()] = formData[key];
  }
}

Сериализация вложенных структур

Bliss.js поддерживает вложенные объекты через синтаксис name="user[username]":

<input name="user[username]" value="ivan">
<input name="user[email]" value="ivan@example.com">

Сериализация вернёт объект:

{
  user: {
    username: "ivan",
    email: "ivan@example.com"
  }
}

Для массивов используется квадратные скобки без имени:

<input name="tags[]" value="js">
<input name="tags[]" value="bliss">

Результат сериализации:

{
  tags: ["js", "bliss"]
}

Отправка сериализованных данных через AJAX

Bliss.js не привязан к конкретной библиотеке для запросов, но сериализованные объекты легко использовать с fetch:

let form = document.querySelector('#userForm');
let data = bliss.forms.serialize(form);

fetch('/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => console.log(result));

Это упрощает интеграцию с REST API и поддерживает гибкую обработку ошибок.

Валидация перед сериализацией

Bliss.js не выполняет встроенную валидацию, но поддерживает совместное использование с кастомными проверками:

let form = document.querySelector('#userForm');
let data = bliss.forms.serialize(form);

if (!data.email || !data.username) {
  console.error('Не заполнены обязательные поля');
} else {
  console.log('Данные готовы к отправке');
}

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

Резюме ключевых возможностей

  • Преобразование формы в объект JavaScript с ключами по имени полей.
  • Поддержка текстовых, чекбокс, радиокнопок, селектов и множественных выборов.
  • Работа с вложенными структурами и массивами через синтаксис [] и object[property].
  • Простая интеграция с AJAX и API.
  • Возможность предобработки и валидации данных перед отправкой.

Эти инструменты делают Bliss.js удобным решением для любых проектов, где требуется гибкая и надежная работа с формами и их данными.

Оглавление