Формат данных при сабмите

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

Разделение представлений: formatted и raw

AutoNumeric оперирует двумя основными формами данных:

  • Formatted value — строка, отображаемая в input:

    1 234 567,89

  • Raw value — числовое или строковое представление без форматирования:

    1234567.89

Форматированный вид всегда зависит от конфигурации (digitGroupSeparator, decimalCharacter, currencySymbol), тогда как raw value нормализован и пригоден для передачи на сервер.

Поведение input при submit

При отправке формы библиотека может либо:

  1. Оставить форматированное значение в input
  2. Подменить значение на «чистое»
  3. Сериализовать значение отдельно через API

Типовое поведение зависит от настроек инстанса и способа интеграции.

Пример стандартной ситуации:

<form id="form">
  <input id="price" name="price" />
  <button type="submit">Send</button>
</form>
const an = new AutoNumeric('#price', {
  digitGroupSeparator: ' ',
  decimalCharacter: ',',
});

При таком подключении input остаётся визуально отформатированным, но при необходимости отправки данных в чистом виде используется явное извлечение значения.

Методы извлечения данных перед отправкой

Получение числового значения

const value = an.getNumber();

Возвращает тип Number, если значение корректно преобразуется в число. Используется для вычислений и валидации.

Получение строкового raw значения

const value = an.getNumericString();

Возвращает строку в стандартном формате Jav * aScript:

"1234567.89"

Этот формат наиболее безопасен при отправке на сервер, так как исключает потерю точности.

Получение форматированного значения

const value = an.getFormatted();

Используется реже, преимущественно для логирования или повторного отображения UI:

"1 234 567,89 ₽"

Сериализация данных формы

При интеграции с backend критически важно различать UI-значение и сериализованное значение.

Типовой подход — перехват события submit:

document.querySelector('#form').addEventListener('submit', (e) => {
  const price = an.getNumericString();

  const hidden = document.createElement('input');
  hidden.type = 'hidden';
  hidden.name = 'price';
  hidden.value = price;

  e.target.appendChild(hidden);
});

В этом случае визуальное поле остаётся неизменным, а в форму добавляется корректное значение для отправки.

Подход с переопределением значения перед отправкой

Иногда используется стратегия временной подмены значения:

document.querySelector('#form').addEventListener('submit', () => {
  an.set(an.getNumericString());
});

После этого input содержит «чистое» значение, и стандартная сериализация формы отправляет корректные данные.

Недостаток подхода — потеря пользовательского форматирования в момент отправки, если форма не перерисовывается обратно.

Обработка нескольких полей AutoNumeric

При наличии нескольких инстансов логика унифицируется:

const fields = [anPrice, anTax, anDiscount];

document.querySelector('#form').addEventListener('submit', (e) => {
  const data = {
    price: fields[0].getNumericString(),
    tax: fields[1].getNumericString(),
    discount: fields[2].getNumericString(),
  };

  Object.entries(data).forEach(([name, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value;
    e.target.appendChild(input);
  });
});

Такой подход устраняет зависимость от DOM-значений input и полностью переводит сериализацию в управляемый слой.

Особенности работы с десятичными значениями

JavaScript Number не всегда гарантирует точность при финансовых расчётах. Поэтому в контексте отправки данных предпочтение часто отдаётся строковому представлению:

const value = an.getNumericString();

Это позволяет сохранить:

  • точность дробной части
  • независимость от локали
  • стабильность при повторной десериализации на сервере

Контроль формата перед отправкой

AutoNumeric допускает динамическое изменение конфигурации, что влияет на формат отображения, но не должно влиять на raw значение.

an.update({
  decimalCharacter: '.',
  digitGroupSeparator: ',',
});

Даже после изменения отображения:

1,234,567.89

raw value остаётся:

1234567.89

Синхронизация состояния инстанса и DOM

В некоторых сценариях DOM может содержать форматированное значение, в то время как внутреннее состояние уже нормализовано. Для предотвращения расхождений используется явная синхронизация:

an.reformat();

или обратное преобразование:

an.unformat();

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

Передача данных через JSON API

При работе с API чаще всего используется явная сборка payload:

const payload = {
  price: anPrice.getNumericString(),
  tax: anTax.getNumericString(),
};

fetch('/api/checkout', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(payload),
});

Такой формат исключает влияние HTML-сериализации и упрощает контроль структуры данных.

Ошибки, возникающие при неверном формате сабмита

Наиболее распространённые проблемы:

  • передача форматированной строки с пробелами или символами валют
  • использование innerText или value вместо методов AutoNumeric
  • смешивание локализованных форматов (, как десятичный разделитель) с backend-ожиданиями .

Пример некорректного значения:

"1 234 567,89"

Такой формат требует дополнительного парсинга на сервере и может приводить к ошибкам преобразования.

Роль скрытых полей в управлении форматом

Hidden inputs часто используются как промежуточный слой между UI и backend:

hidden.value = an.getNumericString();

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

Итоговая модель потока данных

Обобщённая схема работы при сабмите:

  1. Пользователь вводит значение в форматированном виде
  2. AutoNumeric хранит нормализованное внутреннее представление
  3. При отправке формы вызывается метод извлечения raw value
  4. Значение сериализуется в JSON или hidden input
  5. На сервер поступает строго числовой формат без локализации
Оглавление