¿Cómo evitar que se envíe el formulario?

Tengo un formulario que tiene un botón de enviar en alguna parte.

Sin embargo, me gustaría de alguna manera 'atrapar' el evento de envío y evitar que ocurra.

¿Hay alguna manera de que pueda hacer esto?

No puedo modificar el botón Enviar, porque es parte de un control personalizado.

A diferencia de las otras respuestas, el retorno falsees solo una parte de la respuesta. Considere el escenario en el que se produce un error JS antes de la declaración de devolución ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

guión

function mySubmitFunction()
{
  someBug()
  return false;
}

volver falseaquí no se ejecutará y el formulario se enviará de cualquier manera. También debe llamar preventDefaultpara evitar la acción de formulario predeterminada para los envíos de formularios Ajax.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

En este caso, incluso con el error, el formulario no se enviará.

Alternativamente, try...catchse podría usar un bloque.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Puedes usar eventos en línea onsubmitcomo este

<form onsubmit="alert('stop submit'); return false;" >

O

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Manifestación

Ahora, esto puede no ser una buena idea al hacer grandes proyectos. Es posible que deba utilizar los oyentes de eventos.

Por favor leer más sobre Inline Eventos vs detectores de eventos addEventListener (y attachEvent de IE) aquí . Porque no puedo explicarlo más de lo que lo hizo Chris Baker .

Ambos son correctos, pero ninguno de ellos es el "mejor" per se, y puede haber una razón por la cual el desarrollador eligió usar ambos enfoques.

Adjunte un detector de eventos al formulario usando .addEventListener()y luego llame al .preventDefault()método en event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

Creo que es una mejor solución que definir un submitcontrolador de eventos en línea con el onsubmitatributo porque separa la lógica y la estructura de la página web. Es mucho más fácil mantener un proyecto donde la lógica está separada del HTML. Ver: JavaScript discreto .

Usar la .onsubmitpropiedad del formobjeto DOM no es una buena idea porque evita que se adjunten múltiples devoluciones de llamada de envío a un elemento. Ver addEventListener vs onclick .

Prueba este ...

código HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

Código jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

o

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

Lo siguiente funciona a partir de ahora (probado en Chrome y Firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

donde validateMyForm () es una función que devuelve falsesi falla la validación. El punto clave es usar el nombre event. No podemos usar por ej.e.preventDefault()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Para seguir convenciones de programación de JavaScript discretas , y dependiendo de qué tan rápido se cargue el DOM , puede ser una buena idea usar lo siguiente:

<form onsubmit="return false;"></form>

Luego, conecte eventos usando la carga o DOM listo si está usando una biblioteca.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Además, siempre usaría el actionatributo ya que algunas personas pueden tener algún complemento como NoScript en ejecución que luego rompería la validación. Si está utilizando el atributo action, al menos su usuario será redirigido por el servidor en función de la validación de back-end. Si estás usando algo como window.location, por otro lado, las cosas serán malas.

Para evitar que se envíe el formulario, solo necesita hacer esto.

<form onsubmit="event.preventDefault()">
    .....
</form>

Al usar el código anterior, esto evitará el envío de su formulario.

Aquí mi respuesta:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Añado event.preventDefault();en onsubmity funciona.

Puede agregar eventListner al formulario preventDefault()y convertir los datos del formulario a JSON de la siguiente manera:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>