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 servidos (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></title>
<script type="text/javascript">
window.addEventListener('load', 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>
</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>
</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 load de la página indicando que se ejecute la
función inicio donde registramos el evento submit del formulario:
window.addEventListener('load', 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();
}
}
No hay comentarios.:
Publicar un comentario