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

Puedes usar inline event onsubmit así

<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 tenga que utilizar los oyentes de eventos.

Por favor lea más acerca de Eventos en línea vs Escucha de eventos (addEventListener y attachEvent de IE) aquí. Porque no puedo explicarlo más de lo que Chris Baker lo hizo.

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

Adjunte un receptor de eventos al formulario usando .addEventListener() y luego llamar a la .preventDefault() método de 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 controlador de eventos submit en línea con el atributo onsubmit 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: Javascript discreto .

Usando la propiedad .onsubmit del objeto DOM form es no es una buena idea porque le impide adjuntar 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 false si la validación falla. El punto clave es usar el nombre event. No podemos usar para, por ejemplo, e.preventDefault()

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

Para seguir las convenciones de programación de JavaScript discreto , y dependiendo de la rapidez con la que se cargue el DOM, puede ser una buena idea usar lo siguiente:

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

Luego conecta eventos usando onload o DOM ready 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>

También, siempre usaría el atributo action ya que algunas personas pueden tener algún plugin como NoScript corriendo que luego rompería la validación. Si estás usando el atributo action, al menos tu usuario será redirigido por el servidor basado en la validación del backend. Si estás usando algo como window.location, por otro lado, las cosas serán malas.