JS-функция для отслеживания изменений в HTML-форме

Быстрый ответ

Для отслеживания любых изменений в форме применяется метод addEventListener из JavaScript, настроенный на события input или change. Он изменяет статус isModified:

let isModified = false;

document.querySelectorAll('form input, form select, form textarea').forEach((elem) => {
  elem.addEventListener('change', () => isModified = true);
});

// Теперь переменная `isModified` будет свидетельствовать о любой модификации формы.

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

Погружение в детали: подробное обнаружение изменений в форме

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

let originalFormData = new FormData(document.querySelector('form'));

function checkForChanges() {
  let currentFormData = new FormData(document.querySelector('form'));
  for(let key of originalFormData.keys()) {
    if(originalFormData.get(key) !== currentFormData.get(key)){
      console.log(`Поле ${key} изменилось. Что-то здесь не так! 😅`);
      return true;
    }
  }
  return false;
}

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

Подано сцене: хеширование

Из-за большого числа полей в форме, использование хеш-функций, таких как MD5 или SHA1, облегчает процесс сравнения значений:

function generateHash(formData) {
  // Пример с MD5
  return CryptoJS.MD5(formData).toString();
}

let form = document.querySelector('form');
let originalHash = generateHash(new FormData(form).toString());

function formHasChanged() {
  let currentHash = generateHash(new FormData(form).toString());
  return originalHash !== currentHash;
}

Вместо сравнения данных, проверяйте хеши, это быстро выявляет любые изменения.

Визуализация

Визуализация HTML-формы может выглядеть следующим образом:

Первоначальное состояние: [⚪, ⚪, ⚪]  # Все поля пустые.

Если студент ответил на несколько вопросов:

Обнаружены изменения:
1-я правка: [🔴, ⚪, ⚪]  # Первое поле заполнено.
2-я правка: [🔴, 🟡, ⚪]  # Второе поле заполнено.
// и так далее.

Каждый новый ответ указывает на изменение формы:

Детектор изменений: С любым новым вводом возникает предупреждение "Есть изменения! 🚨".

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

Интерактивный, увлекательный UX

Для улучшения качества взаимодействия с пользователем, оставляйте предупреждение о несохранённых изменениях перед закрытием страницы:

window.addEventListener('beforeunload', function (e) {
 if (formHasChanged()){
   e.preventDefault();
   e.returnValue = '';
 }
});

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

Надежность, доступность и... бессмертие?

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

Динамичное управление формами

Для форм, которые динамически загружают поля, используйте "наблюдатели за мутациями":

let observer = new MutationObserver(() => {
  // При обнаружении изменений в DOM-дереве, наблюдатель переустанавливает обработчики событий
});
observer.observe(document.querySelector('form'), {childList: true, subtree: true});

Подробнее об этом расскажет наш спикер на видео

Распространение изменений

Изменения, которые происходят во вложенных формах, можно отслеживать с помощью механизма всплытия событий:

document.querySelector('form').addEventListener('input', (event) => {
  // Форма изменилась!
});

Назначаем один обработчик для формы и контролируем все внутренние изменения.

Интеграция с современными фреймворками

Работа с библиотеками, такими как Formik или React Hook Form, упрощается благодаря их встроенным механизмам для обнаружения изменений. Поищите аналогичные инструменты во Vue, Angular и других средах разработки.

Полезные материалы

1. Element: input event – Web APIs | MDN — описание механизма обнаружения пользовательского ввода в формах.
2. change event | jQuery API Documentation — применение jQuery для отслеживания изменений.
3. Lodash Documentation — сравнение объектов на равенство с помощью Lodash.
4. Window: beforeunload event – Web APIs | MDN — информация о предупреждении пользователей перед закрытием вкладки с несохранёнными данными.
5. Formik: Build forms in React, without the tears — библиотека для удобной работы с формами в React.