¿Cómo prevenir el envío del formulario?

Question

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 e impedir que ocurra.

¿Hay alguna manera de que pueda hacer esto?

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

Answer 1

A diferencia de las otras respuestas, volver false sólo es parte de la respuesta. En cuenta la situación en la que se produce un error de JS antes de la sentencia de retorno ...

html

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

guión

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

regresar false aquí no será ejecutado y el formulario será enviado de cualquier manera. También debe llamar al preventDefault para evitar la acción de formulario predeterminada para los envíos de formularios Ajax.

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

En este caso, incluso con el error de la forma no se someterá!

Alternativamente, podría usarse un bloque try...catch.

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

Answer 2

Usted puede utilizar el evento en línea onSubmit como esto

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

O

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

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

Demo

Ahora, esto puede no ser una buena idea al hacer grandes proyectos. Es posible que necesite usar Event Listeners.

Por favor, read more about Inline Events vs Event Listeners (addEventListener and IE's attachEvent) here. Porque no puedo explicarlo más de Chris Baker hizo.

ambos son correctos, pero ninguno de ellos son "mejores" per se, y puede haber una razón el desarrollador optó por utilizar ambos enfoques.

Answer 3

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

Answer 4

Pruebe 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 stoped."); 
    }); 
}); 

o

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

Answer 5

las siguientes obras a partir de ahora (probado en Chrome y Firefox):

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

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

Answer 6

Para seguir unobtrusive JavaScript convenciones de programación, y dependiendo de la rapidez con la DOM se carga, puede ser una buena idea utilizar el siguiente:

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

Entonces cablear eventos utilizando el proceso de carga o DOM listo si estás 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 me gustaría utilizar el atributo action ya que algunas personas pueden tener algún complemento como NoScript correr que luego romper la validación. Si está utilizando el atributo de acción, al menos el servidor redirigirá a su usuario en función de la validación de back-end. Si está utilizando algo como window.location, por otro lado, las cosas serán malas.

Answer 7

conectar un detector de eventos al formulario utilizando .addEventListener() y luego llamar al método .preventDefault() 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 solución mejor que la definición de un controlador de línea submit evento con el onsubmit atributo 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 de HTML. Ver: Unobtrusive JavaScript.

El uso de la propiedad del objeto form DOM no es una buena idea porque le impide asociar varias devoluciones de llamada de envío a un elemento. Ver addEventListener vs onclick .