Evento en JavaScript validacion de usuario y contraseña

enriquekensuke · #1 (**permalink**) 08/11/2012, 07:30

Hola, muy buenos dias amigos, tengo una validacion en javascript que cuando se loguea un usuario incorrecto la alerta dice: "usuario y/o contraseña incorrecto"

Código:

<script language="javascript">
		fInicio();
		
		function fInicio()
		{
		   loF=document.form1;
		   if (loF.txthacer.value=="2")
		   {
			  alert("Usuario y/o Contraseña No Coinciden");   
		   }
		}
    </script>

Cuando la caja de texto "hacer" es igual a 2 se cumple la condicion.

Quiero cambiar esa alerta por un mensaje diferente que encontre en la web:

Código:

<script>
		$("#msgup").bar({
			color 			 : '#1E90FF',
			background_color : '#FFFFFF',
			removebutton     : false,
			message			 : 'Usuario y/o Contraseña Invalido',
			time			 : 4000
		});
	
	</script>

pero no me funciona, lo coloque asi:

Código:

function fInicio()
		{
		   loF=document.form1;
		   if (loF.txthacer.value=="2")
		   {
			  $("#msgup").bar({
			color 			 : '#1E90FF',
			background_color : '#FFFFFF',
			removebutton     : false,
			message			 : 'Usuario y/o Contraseña Invalido',
			time			 : 4000
		});   
		   }
		}
    </script>

Ese codigo con un boton si funciona:

Código:

<a id="msgup" class="button"><button>Boton Prueba</button></a>

Soy nuevo en javascript asi que espero que me ayuden, porque no se armar esa funcion.

emprear · #2 (**permalink**) 08/11/2012, 09:07

Se puede saber que es bar() en jQuery?
Además validar un usuario con un simple
loF.txthacer.value=="2"
es completamente inseguro
Saludos

enriquekensuke · #3 (**permalink**) 08/11/2012, 09:52

Cita:

Iniciado por emprear

Se puede saber que es bar() en jQuery?
Además validar un usuario con un simple
loF.txthacer.value=="2"
es completamente inseguro
Saludos

La funcion que descargue y quiero hacer funcionar es esta por favor descargala y pruebala, para que me degas como incluirla en mi pagina:

[URL="http://www.mediafire.com/?lvpk2ahgnlpd6o8"]Link![/URL]

El txthacer es solamente una caja de texto q sirve para saber si entro o no, si no pasa la valadicion esa caja de texto se llena con un 2 y ahi es donde se cumple la condicion del JS.

Gracias x ayudarme!

emprear · #4 (**permalink**) 09/11/2012, 11:17

Cita:

Iniciado por enriquekensuke

La funcion que descargue y quiero hacer funcionar es esta por favor descargala y pruebala, para que me degas como incluirla en mi pagina:

[URL="http://www.mediafire.com/?lvpk2ahgnlpd6o8"]Link![/URL]

El txthacer es solamente una caja de texto q sirve para saber si entro o no, si no pasa la valadicion esa caja de texto se llena con un 2 y ahi es donde se cumple la condicion del JS.

Gracias x ayudarme!

Si es cosa de mostrar un mensaje, evitate ese plugin. ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
/*<![CDATA[*/
#mensaje{
width: 100%;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
background: #000;
color:#FFF;
text-align: center;
}
/*]]>*/
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="mensaje"><!-- mensaje --></div>
<div class="content">
<input type="password" name="pass" id="pass" value="" />
<button onclick="validar();">Validar</button>
</div>
<script  type="text/javascript">
$("#mensaje").hide();
function validar(){
var password = document.getElementById('pass').value;
    if(password == '2'){
    $(".content").hide(); // si comentas esta linea el input se ve igual aunque la clave este bien
    $("#mensaje").html('ingreso correcto'); 
    $("#mensaje").fadeIn(2000);
    $("#mensaje").fadeOut(3000);
    }else{
    $("#mensaje").html('clave incorrecta'); 
    $("#mensaje").fadeIn(2000);
    $("#mensaje").fadeOut(3000);
    }
}
</script>   
</body>
</html>

SAludos

enriquekensuke · #5 (**permalink**) 13/11/2012, 21:18

Cita:

Iniciado por emprear

Si es cosa de mostrar un mensaje, evitate ese plugin. ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
/*<![CDATA[*/
#mensaje{
width: 100%;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
background: #000;
color:#FFF;
text-align: center;
}
/*]]>*/
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="mensaje"><!-- mensaje --></div>
<div class="content">
<input type="password" name="pass" id="pass" value="" />
<button onclick="validar();">Validar</button>
</div>
<script  type="text/javascript">
$("#mensaje").hide();
function validar(){
var password = document.getElementById('pass').value;
    if(password == '2'){
    $(".content").hide(); // si comentas esta linea el input se ve igual aunque la clave este bien
    $("#mensaje").html('ingreso correcto'); 
    $("#mensaje").fadeIn(2000);
    $("#mensaje").fadeOut(3000);
    }else{
    $("#mensaje").html('clave incorrecta'); 
    $("#mensaje").fadeIn(2000);
    $("#mensaje").fadeOut(3000);
    }
}
</script>   
</body>
</html>

SAludos

Gracias mi pana, y como hago para adaptar ese codigo que NO se ejecute con el Onclick si no con la condicion de que txthacer==2 porq ya lo probe pero igual no me ejecuta el mensaje? :S
Gracias amigo!

emprear · #6 (**permalink**) 13/11/2012, 22:40

Si, funciona bien, mirá
http://foros.emprear.com/jquerye/mensaje_jquery.html

Puede ser que yo cargaba la jquery de google, y parece que fallaba por algún problema en la red, el ejemplo que te puse es el mismo, solo que cargo el jquery desde mi server, mirá el código fuente.
A menos que pongas 2, te muestra "clave incorrecta" y se vuelve a ver el form

Saludos