 |
Evento submit (DOM)
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.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob1=document.getElementById('formulario');
ob1.addEventListener('submit',enviarDatos,false);
}
function enviarDatos(e)
{
var nom=document.getElementById('usuario');
var cla=document.getElementById('clave');
if (nom.value=='' || cla.value=='')
{
alert('debe ingresar los dos datos');
e.preventDefault();
return false;
}
else
return true;
}
</script>
</head>
<body>
<form action="#" method="post" id="formulario">
usuario:<input type="text" name="usuario" id="usuario" size="20">
<br>
clave:<input type="password" name="clave" id="clave" size="20">
<br>
<input type="submit" value="Entrar">
</form>
</body>
</html>
El código javascript es:
window.addEventListener('load',inicializarEventos,false);
function inicializarEventos()
{
var ob1=document.getElementById('formulario');
ob1.addEventListener('submit',enviarDatos,false);
}
function enviarDatos(e)
{
var nom=document.getElementById('usuario');
var 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:
function inicializarEventos()
{
var ob1=document.getElementById('formulario');
ob1.addEventListener('submit',enviarDatos,false);
}
La función enviarDatos verifica si alguno de los dos controles está vacío procediendo a mostrar el mensaje, 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)