04.01.2025

Como Parar o Envio de Formulário com JavaScript e Dojo Toolkit

Resposta Rápida

Para bloquear o envio de um formulário usando JavaScript, você deve adicionar um manipulador de eventos submit e usar o event.preventDefault():

document.querySelector('form').addEventListener('submit', event => event.preventDefault());

Neste exemplo, o método querySelector é aplicado ao formulário, e o envio dos dados é interrompido usando o método preventDefault, que atua como um "sinal de parada".

Validação de Formulário para Bloquear o Envio

Antes de enviar os dados, é crucial validar a entrada do usuário no formulário. A função isValidForm() verifica se os dados atendem a um conjunto de condições, atuando como um validador automático.

document.querySelector('form').addEventListener('submit', function(event) {
  if (!isValidForm(this)) {
    event.preventDefault(); // Parece que um erro foi encontrado, parando o envio!
    return false;          // Além disso, evitamos o envio de dados potencial.
  }
  // Todas as verificações foram bem-sucedidas, podemos enviar o formulário!
});

Se o formulário falhar na validação, podemos gentilmente retornar o usuário para a página do formulário usando window.history.back(), agindo como nosso navegador GPS entre páginas da web.

if (!isValidForm(this)) {
  window.history.back(); // Se o formulário falhar na validação, retorne o usuário
  event.preventDefault();
  return false; // Garantindo que o envio de dados não ocorra
}

Botão Personalizado para Controle Sobre o Envio do Formulário

Você pode usar um "botão" personalizado para gerenciar o processo de envio do formulário:

<input type="button" value="Enviar" onclick="submitForm()" /> <!-- Não é tão simples com este botão! -->

function submitForm() {
  var form = document.querySelector('form');
  if (isValidForm(form)) {
    // O formulário passou com sucesso a verificação, envie os dados!
    form.submit();
  }
} // Clicar neste botão aciona as verificações de validação, não o envio imediato!

Garantindo Compatibilidade entre os Navegadores

Para garantir o envio adequado do formulário em todos os navegadores, é necessário fornecer compatibilidade entre plataformas. Aqui está um exemplo de uma abordagem universal:

function attachEvent(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler); // Para versões mais antigas do IE
  }
}

attachEvent(document.querySelector('form'), 'submit', function(event) {
  // Lógica para lidar com o envio do formulário
  event.preventDefault(); // Para a submissão em todos os navegadores!
});

Esta função é semelhante a um linguista de dialetos, traduzindo a linguagem moderna para um antigo dialeto para compreensão de todos os ouvintes.

Visualização

O processo de envio de formulário pode ser representado da seguinte forma:

Estação (🚉): Enviando dados do usuário
Trem (🚆): Pacote de dados do formulário
Semáforo (🚦): Função JavaScript controlando o movimento do trem

Bloqueando o movimento do trem:

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 🚦 Sinal de parada, "trem" permanece parado!
});

Resultado:

Antes: 🚉 - 🚆➡️... (O formulário está a caminho do servidor)
Depois: 🚉 - 🚆 (Trem permanece parado, dados não são enviados)

O método event.preventDefault() para o "trem" com os dados.

🚦: O código JavaScript atua como o despachante de trem, controlando o envio do "trem" com dados do formulário.

Métodos Avançados

Vamos explorar algumas abordagens modernas para gerenciar o processo de envio do formulário.

Usando Bibliotecas

Se você estiver usando Dojo, pode vincular manipuladores de eventos usando dojo.connect:

dojo.connect(dijit.byId('meuForm'), 'onsubmit', function(event) {
  event.preventDefault(); // As regras de manipulação de eventos permanecem inalteradas!
  // Aqui, lógica de validação de dados
});

Trabalhando com Código Legado

Às vezes, versões mais antigas de código dependem do valor de retorno do manipulador de eventos:

<form onsubmit="return validateForm();"> <!-- Antigo, abordagens testadas pelo tempo! -->

function validateForm() {
  if (!meetConditions) {
    return false;  // Para o envio do formulário
  }
  return true; // Tudo certo, prossiga com o envio!
}

Gerenciando Navegação Após Bloquear o Envio

Quer redirecionar o usuário para outra página após interromper o envio? Faça assim:

event.preventDefault();
window.location.href = '/outra-pagina'; // Redirecionando para outra página!

Recursos Úteis

1. Evento: método preventDefault() - Web API | MDN — Informações adicionais sobre o uso de preventDefault().
2. javascript - event.preventDefault() vs return false - Stack Overflow — Uma comparação entre preventDefault e return false.
3. Validação de Formulário em JavaScript - W3Schools — Visão geral da validação de formulário do lado do cliente usando JavaScript.
4. web.dev — Tudo sobre as últimas tendências em desenvolvimento web.
5. HTMLFormElement: método submit() - Web API | MDN — Uma análise mais profunda do método submit do HTMLFormElement.

Video

Navigation