27.12.2024

Função JS para Rastrear Mudanças em Formulários HTML

Resposta Rápida

Para rastrear qualquer alteração em um formulário, utilize o método addEventListener do JavaScript, configurado para os eventos input ou change. Essa modificação atualiza o status de isModified:

let isModified = false;

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

// Agora a variável `isModified` indicará qualquer modificação no formulário.

Este código se aplica a todos os elementos de formulário e registra quaisquer mudanças. Antes de enviar o formulário, verifique o valor da variável isModified.

Mergulhando nos Detalhes: Detecção de Mudanças em Formulários

Se você precisar rastrear mudanças específicas, pode aplicar o seguinte método para uma comparação detalhada:

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(`O campo ${key} foi alterado. Algo não está certo! 😅`);
      return true;
    }
  }
  return false;
}

Armazene o estado original do formulário e compare-o com o estado atual, ajudando a identificar possíveis mudanças.

Em Cena: Hashing

Com muitos campos em um formulário, usar funções hash como MD5 ou SHA1 facilita o processo de comparação de valores:

function generateHash(formData) {
  // Exemplo com 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;
}

Em vez de comparar dados diretamente, verifique os hashes; isso revela rapidamente quaisquer mudanças.

Visualização

A visualização de um formulário HTML pode aparecer da seguinte forma:

Estado Inicial: [⚪, ⚪, ⚪]  # Todos os campos estão vazios.

Se um aluno respondeu a algumas perguntas:

Mudanças Detectadas:
1ª Edição: [🔴, ⚪, ⚪]  # O primeiro campo está preenchido.
2ª Edição: [🔴, 🟡, ⚪]  # O segundo campo está preenchido.
// e assim por diante.

Cada nova resposta indica uma mudança no formulário:

Detector de Mudanças: Com cada nova entrada, um aviso aparece "Existem mudanças! 🚨".

Isso funciona de forma semelhante a um script que continuamente monitora o conteúdo do formulário.

UX Interativa e Engajadora

Para melhorar a qualidade da interação do usuário, mantenha um aviso sobre alterações não salvas antes que a página seja fechada:

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

É essencial não apenas rastrear mudanças, mas também responder ativamente às ações do usuário para melhorar a usabilidade.

Confiabilidade, Acessibilidade e... Imortalidade?

Vamos tornar o sistema de detecção de mudanças universal, adequado para vários controles e compatível com diferentes tecnologias:

Gerenciamento Dinâmico de Formulários

Para formulários que carregam campos dinamicamente, use "Mutation Observers":

let observer = new MutationObserver(() => {
  // Quando mudanças são detectadas no DOM, o observador reinstala os manipuladores de eventos
});
observer.observe(document.querySelector('form'), {childList: true, subtree: true});

Propagação de Mudanças

Mudanças ocorrendo em formulários aninhados podem ser rastreadas usando a propagação de eventos:

document.querySelector('form').addEventListener('input', (event) => {
  // O formulário foi alterado!
});

Atribua um único manipulador de eventos ao formulário para monitorar todas as alterações internas.

Integração com Frameworks Modernos

Trabalhar com bibliotecas como Formik ou React Hook Form é simplificado devido aos seus mecanismos integrados para detecção de mudanças. Procure ferramentas similares no Vue, Angular e outros ambientes de desenvolvimento.

Recursos Úteis

1. Elemento: evento input - Web APIs | MDN — descrição do mecanismo de detecção de entrada do usuário em formulários.
2. evento change | Documentação da API jQuery — usando jQuery para rastrear mudanças.
3. Documentação Lodash — comparando objetos por igualdade usando Lodash.
4. Janela: evento beforeunload - Web APIs | MDN — informações sobre avisar os usuários antes de fechar uma aba com dados não salvos.
5. Formik: Crie formulários em React, sem lágrimas — uma biblioteca para manipulação fácil de formulários em React.

Video

Navigation