Problema con formulario en javascript

Fsg · #1 (**permalink**) 07/02/2011, 12:50

Hola a todos.
Apenas me estoy iniciando en esto de javascript, bajandome un manual empece a jugar un poco con el lenguaje, creando un pequeño formulario que me permita modificar una capa mostrando un mensaje.Antes ya habia hecho uno, y me salio bien, pero al momento de otro formulario, no me funciona .

El formulario son 2 campos, nombre y contraseña(contraseña en realidad tambien es texto) y dentro del formulario le añadi una funcion para checar si estan vacios o no, si estan vacios me tiene que modificar una capa mostrando el mensaje correspondiente.

Aca el codigo HTML:

Código:

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="funciones.js" ></script>
	<style type="text/css">
#capadeformulario{
width: 600px;
height: 600px;
float: left;
}

#capadecampos{
width: 300px;
height: 300px;
float: left;
}


	</style>
</head>
<body>
<div id="capadeformulario">
	<div id="capadecampos">
	<form name="formularios" id="formularios" action="#" >
	<input type="text" name="nombre" id="nombre" />
	<input type="text" name="contraseña" id="contrasenas" />
	<input type="submit" name="submit" value="Enviar" onclick="corrigiendo()" />
	</form>
		<div id="capademensajes" style="width: 300px; height: 300px; float: right;">	
	</div>
	</div>
</div>
</body>
</html>

Y el codigo javascript de la funcion:

Código:

function corrigiendo(){
	var nombre = document.getElementById('nombre');
	var contrasena= document.getElementById('contrasenas');
	var nombres = nombre.value;
	var contra = contrasena.value;
		if(nombres==""){
			errornombre();
		}else{	
		alert("NOMBRE CORRECTO");
		}	
		if(contra==""){
			errorcontra();
			}else{
				alert("CONTRASEÑA CORRECTA");
			}
}

function errornombre(){
	document.getElementById("capademensajes").innerHTML="ERROR DEBE DE PONER UN NOMBRE";
	}
	
function errorcontra(){
	document.getElementById("capademensajes").innerHTML="ERROR DEBE DE PONER UNA CONTRASEÑA";
	}

El error esta en que si me modifica la capa(capademensajes) con el mensaje de la funcion de error(ya sea si es errornombre o errorcontra ) el problema cae, en que no se queda modificada la capa, se ve cuando cambia, pero no se queda con el mensaje que le añadi modificando la capa por innerHTML.

¿Alguien sabe porque?

JavierB · #2 (**permalink**) 07/02/2011, 12:57

Hola Fsg

Me parece que el problema es que, aunque haya un error, el formulario se envía.

En lugar de llamar a la función desde el botón submit, llámala desde el evento onsubmit del formulario:

Código HTML:

Ver original<form onsubmit="return tufuncion()">

Y cuando haya un error lo pones así:

Código Javascript:

Ver originalif(contra==""){
                      errorcontra();
                      return false;
            }

Saludos,

Fsg · #3 (**permalink**) 07/02/2011, 13:37

Sigue igual, asi quedo el codigo del formulario:

Código:

	<form name="formularios" id="formularios" onsubmit="corrigiendo()" action="" >
	<input type="text" name="nombre" id="nombre" />
	<input type="text" name="contraseña" id="contrasenas" />
	<input type="submit" name="submit" value="Enviar" />
	</form>

Y el codigo de la funcion asi:

Código:

function corrigiendo(){
	var nombre = document.getElementById('nombre');
	var contrasena= document.getElementById('contrasenas');
	var nombres = nombre.value;
	var contra = contrasena.value;
		if(nombres==""){
			errornombre();
			return false;
		}else{	
		alert("NOMBRE CORRECTO");
		}	
		if(contra==""){
			errorcontra();
			return false;
			}else{
				alert("CONTRASEÑA CORRECTA");
			}
}

function errornombre(){
	document.getElementById("capademensajes").innerHTML="ERROR DEBE DE PONER UN NOMBRE";
	}
	
function errorcontra(){
	document.getElementById("capademensajes").innerHTML="ERROR DEBE DE PONER UNA CONTRASEÑA";
	}

Pero sigue pasando lo mismo, no se queda modificado la capa, ¿sera algun error en el codigo html?

JavierB · #4 (**permalink**) 07/02/2011, 13:41

Hola de nuevo.

Código:

onsubmit="return corrigiendo()"

Saludos,

Fsg · #5 (**permalink**) 07/02/2011, 13:51

Ya veo, muchas gracias, se me hacia raro, ya que anteriormente habia usado un codigo similar, y me funcionaba sin añadir return, ¿en todos los casos similares a este se tiene que añadir return? es que no entiendo por que anteriormente me funcionaba y ahora se necesita añadir return (el codigo similar solo comparaba si era par o impar, utilizando MOD)