Este evento se dispara cuando presionamos un botón de tipo submit contenido en un formulario.
Uno de los usos más importantes de este evento es poder validar en el cliente (navegador) los datos ingresados previo a ser enviados al servidor.
Implementaremos un formulario que solicite la carga del nombre de un usuario y su clave. No enviaremos los datos al servidor hasta que cargue los dos datos por teclado.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<form action="#" method="post" id="formulario">
<p>usuario:<input type="text" name="usuario" id="usuario" size="20"></p>
<p>clave:<input type="password" name="clave" id="clave" size="20"></p>
<p><input type="submit" value="Entrar"></p>
</form>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
document.getElementById('formulario').addEventListener('submit', (e) => {
let nom = document.getElementById('usuario')
let cla = document.getElementById('clave')
if (nom.value == '' || cla.value == '') {
alert('debe ingresar los dos datos')
e.preventDefault()
return false
} else
return true
})
Debemos inicializar el evento submit para el formulario, el algoritmo de la función anónima se encarga de recuperar los datos contenidos en los controles input:
document.getElementById('formulario').addEventListener('submit', (e) => {
let nom = document.getElementById('usuario')
let cla = document.getElementById('clave')
if (nom.value == '' || cla.value == '') {
alert('debe ingresar los dos datos')
e.preventDefault()
return false
} else
return true
})
Si alguno de los dos controles está vacío procede a mostrar el mensaje y luego se debe llamar al método preventDefault para evitar que se ejecute el envío de datos al servidor.
Esta forma de validar los datos de entrada es muy útil, ya que si el navegador tiene deshabilitado la posibilidad de ejecutar JavaScript los datos del formulario se enviarán al servidor (en ese caso allá es donde procedemos a validarlos)