Стилизация ошибок

В библиотеке AutoNumeric отсутствует встроенная «жёсткая» система валидации в классическом смысле форм HTML5, однако поведение некорректного ввода и выходов за пределы допустимых значений управляется через комбинацию конфигурации, событий и CSS-классов, которые формируют основу для стилизации ошибок.

Любая ошибка в контексте AutoNumeric обычно возникает не как исключение, а как состояние поля: некорректный ввод, нарушение диапазона, вставка неподходящего значения, конфликт формата локали или программное присвоение значения вне допустимых параметров.

Типы состояний, которые интерпретируются как ошибка

Вместо единого механизма ошибок используется набор состояний:

1. Нарушение диапазона значений

При заданных параметрах minimumValue и maximumValue любое значение вне диапазона не считается допустимым.

new AutoNumeric('#input', {
  minimumValue: '0',
  maximumValue: '1000'
});

Поведение при выходе за пределы зависит от конфигурации:

  • автоматическая корректировка (clamping)
  • отклонение ввода
  • сохранение визуально, но пометка состояния

2. Некорректный ввод символов

AutoNumeric фильтрует вводимые символы, однако при вставке из буфера обмена возможны случаи:

  • смешанные локали (, и . одновременно)
  • наличие буквенных символов
  • научная нотация вне поддержки конфигурации

Такие ситуации приводят к состоянию «невалидного буфера», которое может быть обработано через события.

3. Ошибки программного присвоения

При использовании API:

anElement.set('abc');

или

anElement.set(null);

в зависимости от конфигурации значение может:

  • быть проигнорировано
  • преобразовано в 0
  • вызвать событие ошибки

События, связанные с ошибками и некорректными состояниями

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

onInvalidPaste

Срабатывает при вставке некорректного значения.

new AutoNumeric('#input', {
  onInvalidPaste: (event) => {
    console.log('Ошибка вставки');
  }
});

Типовые сценарии:

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

onInvalidValue

Срабатывает при установке недопустимого значения через API.

new AutoNumeric('#input', {
  onInvalidValue: (event) => {
    console.log('Недопустимое значение');
  }
});

onChange / onInput как индикаторы состояния

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

CSS-классы как основа стилизации ошибок

AutoNumeric не навязывает строгую систему классов «error/success», однако позволяет использовать стандартные DOM-механизмы.

Наиболее распространённая стратегия — динамическое добавление класса при обнаружении некорректного состояния.

const el = document.querySelector('#input');

new AutoNumeric(el, {
  onInvalidValue: () => {
    el.classList.add('an-error');
  },
  onValidValue: () => {
    el.classList.remove('an-error');
  }
});

Пример CSS стилизации

.an-error {
  border: 1px solid #e74c3c;
  background-color: rgba(231, 76, 60, 0.08);
  color: #c0392b;
}

.an-error:focus {
  outline: 2px solid #e74c3c;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

Индикация ошибок через состояния значения

AutoNumeric работает с двумя формами значения:

  • formatted value (отображаемое)
  • unformatted value (чистое числовое)

Ошибка часто определяется на уровне unformatted value.

const anElement = AutoNumeric.getAutoNumericElement('#input');

const raw = anElement.getNumber();

if (isNaN(raw)) {
  document.querySelector('#input').classList.add('an-error');
}

Обработка ошибок диапазона (min/max) через события и контроль

Хотя библиотека может автоматически ограничивать значения, стилизация часто требует явного контроля.

new AutoNumeric('#input', {
  minimumValue: '10',
  maximumValue: '50',

  onChange: (event) => {
    const value = event.target.getAutoNumeric().getNumber();

    if (value < 10 || value > 50) {
      event.target.classList.add('an-error-range');
    } else {
      event.target.classList.remove('an-error-range');
    }
  }
});

CSS-стилизация ошибок диапазона

.an-error-range {
  background: #fff3cd;
  border-color: #ffcc00;
}

Использование пользовательских валидаторов

AutoNumeric не ограничивает использование внешней логики валидации, что делает интеграцию со сторонними схемами стандартной практикой.

function validateValue(anElement) {
  const value = anElement.getNumber();

  if (value === null || value === undefined) {
    return false;
  }

  if (value < 0) {
    return false;
  }

  return true;
}

Привязка к UI:

const el = document.querySelector('#input');

const an = new AutoNumeric(el, {
  onChange: () => {
    const instance = AutoNumeric.getAutoNumericElement(el);

    if (!validateValue(instance)) {
      el.classList.add('an-error');
    } else {
      el.classList.remove('an-error');
    }
  }
});

Интеграция с формами HTML

При использовании внутри <form> AutoNumeric не блокирует отправку формы автоматически. Ошибки должны обрабатываться вручную.

document.querySelector('form').addEventListener('submit', (e) => {
  const el = document.querySelector('#input');
  const an = AutoNumeric.getAutoNumericElement(el);

  if (!validateValue(an)) {
    e.preventDefault();
    el.classList.add('an-error');
  }
});

Стилизация состояния «пустое значение как ошибка»

Во многих интерфейсах пустое значение считается ошибкой.

new AutoNumeric('#input', {
  emptyInputBehavior: 'null',

  onFocusOut: (event) => {
    const el = event.target;

    if (!el.value || el.value.trim() === '') {
      el.classList.add('an-error-empty');
    }
  }
});

CSS для пустого значения

.an-error-empty {
  border-style: dashed;
  border-color: #e67e22;
}

Сложные сценарии ошибок: конфликт локалей

При смене локали возможно появление неконсистентных форматов:

  • 1,234.56 (US)
  • 1.234,56 (EU)

При неправильной конфигурации возникает смешанный ввод.

new AutoNumeric('#input', {
  digitGroupSeparator: '.',
  decimalCharacter: ','
});

При конфликте часто используется проверка через регулярные выражения:

function detectLocaleConflict(value) {
  return /[.,].*[.,]/.test(value);
}

Визуальная деградация при ошибках форматирования

Некорректный ввод может приводить к состояниям:

  • частично отформатированное число
  • потеря группировки
  • временное отображение raw value

Для таких случаев применяется временная стилизация:

new AutoNumeric('#input', {
  onLocalFormatting: (event) => {
    event.target.classList.add('an-formatting');
  },

  onValueChanged: (event) => {
    event.target.classList.remove('an-formatting');
  }
});
.an-formatting {
  opacity: 0.7;
}

Централизованная стратегия управления ошибками

В сложных интерфейсах применяется единый слой управления состояниями:

  • an-error
  • an-error-range
  • an-error-empty
  • an-formatting

Каждое состояние связано с конкретным источником ошибки, а не с общей «невалидностью», что позволяет строить многоуровневую визуализацию.

function applyErrorState(el, type) {
  el.classList.remove('an-error', 'an-error-range', 'an-error-empty');

  if (type) {
    el.classList.add(type);
  }
}

Поведение при программной синхронизации данных

При обновлении значений из внешнего источника ошибки часто возникают из-за:

  • рассинхронизации формата
  • некорректных числовых типов
  • JSON-данных с null/undefined
function syncValue(el, value) {
  const an = AutoNumeric.getAutoNumericElement(el);

  try {
    an.set(value);
    el.classList.remove('an-error');
  } catch {
    el.classList.add('an-error');
  }
}

Использование shadow-state для ошибок

Некоторые реализации не меняют DOM напрямую, а используют отдельное состояние:

const state = {
  error: false
};

new AutoNumeric('#input', {
  onInvalidValue: () => {
    state.error = true;
  },

  onValidValue: () => {
    state.error = false;
  }
});

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

Оглавление