Todo formulario se le puede capturar el evento submit que se dispara previo a enviar los datos del formulario al servidor.

Uno de los usos más extendidos es la de validar los datos ingresados al formulario y abortar el envío de los mismos al servidor (con esto liberamos sobrecargas del servidor)

El evento submit se dispara cuando presionamos un botón de tipo type="submit".

Para probar el funcionamiento del evento submit implementaremos un formulario que solicita la carga de una clave y la repetición de la misma. Luego cuando se presione un botón de tipo "submit" verificaremos que las dos claves ingresadas sean iguales.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

  <form method="post" action="procesar.php" id="formulario1">
    Ingrese clave:
    <input type="password" id="clave1" name="clave1" size="20" required>
    <br>
    Repita clave:
    <input type="password" id="clave2" name="clave2" size="20" required>
    <br>
    <input type="submit" id="confirmar" name="confirmar" value="Confirmar">
  </form>

<script>
  window.addEventListener('DOMContentLoaded', inicio, false);

  function inicio() {
    document.getElementById("formulario1").addEventListener('submit', validar, false);
  }

  function validar(evt) {
    var cla1 = document.getElementById("clave1").value;
    var cla2 = document.getElementById("clave2").value;
    if (cla1!=cla2) {
      alert('Las claves ingresadas son distintas');
      evt.preventDefault();
    }
  }
</script>
  
</body>
</html>

Tengamos en cuenta que la primer línea indica que se trata de una página de HTML5:

<!doctype html>

Definimos un formulario que solicita la carga de dos claves y un botón submit para enviar los datos al servidor:

<form method="post" action="procesar.php" id="formulario1">
Ingrese clave:
<input type="password" id="clave1" name="clave1" size="20" required>
<br>
Repita clave:
<input type="password" id="clave2" name="clave2" size="20" required>
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

Registramos el evento DOMContentLoaded de la página indicando que se ejecute la función inicio donde registramos el evento submit del formulario:

  window.addEventListener('DOMContentLoaded', inicio, false);

  function inicio() {
    document.getElementById("formulario1").addEventListener('submit', validar, false);
  }

La función validar extrae los contenidos de los dos "password" y verificamos si tienen string distintos en cuyo caso llamando al método preventDefault del objeto que llega como parámetro lo cual previene que los datos se envíen al servidor:

  function validar(evt) {
    var cla1 = document.getElementById("clave1").value;
    var cla2 = document.getElementById("clave2").value;
    if (cla1!=cla2) {
      alert('Las claves ingresadas son distintas');
      evt.preventDefault();
    }
  }

Retornar