Hace poco que tonteo con js y tengo algunos conceptos que no me quedan claros.
Estoy haciendo un script para validar formularios en js y me surgen algunas dudas.
El funcionamiento es muy básico, tenemos una pagina html con un formulario a la que hemos añadido un script js. Este script se encarga de que cuando el usuario hace click en el botón "enviar" se validen los campos de entrada.
Esto No es parte del problema. El problema es la forma en JavaScript funciona.
Al final, la función que valida los campos nos devolverá "true" si los campos son correctos o "false" si no lo son. Evidentemente, si el formulario no pasa la validación necesaria queremos que no se cambie a la pagina marcada por el atributo "action" del formulario, si no que se quede en la misma y así el usuario pueda remediar su entrada de datos.
Pues aquí es donde tengo el problema.
Os pongo mis dos archivos para que sea mas facil la visualización del problema.
test.html
Código :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/> <meta http-equiv="content-style-type" content="text/css"/> <script type="text/javascript" src="script1.js"></script> </head> <body> <form id="formulario" action="test_test.html" method="get" enctype="multipart/form-data"> <p><input type="text" /></p> <p><input type="submit" /></p> </form> </body> </html>
y aqui el archivo js
script1.js
Código :
function addListener (element, baseName, handler) {
if (element.addEventListener)
element.addEventListener(baseName, handler, false);
else if (element.attachEvent)
element.attachEvent('on'+baseName, handler);
} //addListener
function initForm () {
form = document.getElementById('formulario');
form.onsubmit = checkForm;
//addListener (form, 'submit', checkForm);
} //initForm
function checkForm () {
if (true){
alert ('No Validation');
return false;
} else {
alert ('Validation Passed');
return true;
}
} //checkForm
addListener (window, 'load', initForm)Como veis en la función initForm hay una linea que esta comentada y es esta mi duda.
Tal y como esta ahora el script todo funciona bien. Pero si comento la linea form.onsubmit = checkForm
y descomento la linea de addListener... se hace la validación pero TAMBIÉN se hace el cambio de página ¡Con lo que la Validación no sirve de nada!
¿Alguien me podría explicar la diferencia entre estas dos lineas?
