la validación no funciona

donfalcone · #1 (**permalink**) 09/02/2008, 12:36

Hola a tod@s!

Estoy haciendo el típico login de email + password, y le estoy poniendo además un script javaScript para chequear que el campo email no sea incorrecto y el password no este vacío.

Qué bonito hasta el momento,... pero no me funciona. Soy altamente inexperto en Javascript, por lo que a lo mejor es una chorrada.

Aquí les paso el código, si alguién ve el fallo(s). Se agradecen las sugerencias

Código PHP:

  <script type="text/javascript">

 
var email = document.getElementById("email").value;

var pass = document.getElementById("pass").value;

 
function validacion() {

if( !(/w{1,}[@][w-]{1,}([.]([w-]{1,})){1,3}$/.test(email)) ) {

return false;

}

 
else if( pass == null || pass.length == 0 || /^s+$/.test(pass) ) {

return false;

}else{

return true;

}

}

</script>

</head>

 
<body>

 
<div id="login">

<form id="cont" action="login.php" method="post">

<h2>4 decision</h2>

 
        <p id="email">E-mail: <input id="col" type="text" name="e-mail" value=""></p>

        <p id="pass">Password: <input id="col1" type="password" name="password" value=""></p>

        <br />

<input class="boton" type="submit" value="Login" onsubmit="return validacion()">

Saludos y gracias!

caricatos · #2 (**permalink**) 09/02/2008, 12:49

Hola:

El evento submit es del formulario y no de los controles, así que esa validación debería ir en el tag form...

Pruébalo y nos cuentas.

Saludos

JavierB · #3 (**permalink**) 09/02/2008, 12:50

Hola donfalcone

El evento onsubmit tienes que ponerlo en el formulario, no en el botón.

Edito: se me ha adelantado caricatos (¡Hola!

)

Saludos,

donfalcone · #4 (**permalink**) 09/02/2008, 12:53

Gracias!

Funcionó, pero ahora no puedo acceder con el mail y contrasena correcta,....

Soy un crack

Saludos!

codigojavascript · #5 (**permalink**) 09/02/2008, 16:02

Prueba con esto:

Código:

<HTML>
<HEAD>

<script language="javascript"> 

function validacion() { 

var email = document.form.mail.value; 
var pass = document.form.password.value; 

var valid1 = /(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)/;
var valid2 = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$/;

if (valid1.test(email) | !valid2.test(email)) {
alert('no se ha escrito bien el mail')
return false; 
} 

if(pass == null || pass.length == 0 || /^s+$/.test(pass)) { 
alert('debes escribir la contraseña')
return false;
}

else {
alert('todo correcto!!!')
return true; 
} 

} 
</script> 

</HEAD>

<BODY>

<div id="login"> 
	<form id="cont" action="login.php" method="post" name="form"> 
		<h2>4 decision</h2>
        <p id="email">E-mail: <input id="col" type="text" name="mail" value=""></p> 
        <p id="pass">Password: <input id="col1" type="password" name="password" value=""></p> 
        <p><input class="boton" type="button" value="Login" onClick="validacion()"></p>
	</form>
</div>

<p>
Solucionado por: www.codigojavascript.com
</p>

</BODY>
</HTML>

Saludos
Toda la suerte!!!

donfalcone · #6 (**permalink**) 11/02/2008, 02:21

Hola!

Gracias por tu respuesta codigojavascript, pero tampoco me funciona.
Ya que, por ejemplo, si no cumplo alguno de los requisitos me aparece el mensaje de alerta correspondiente en pantalla, pero me direcciona igualmente a login.php, en lugar de quedarse en la página actual.

Alguna sugerencia de donde está el problema?.

Gracias y saludos!!

jcxnet · #7 (**permalink**) 11/02/2008, 03:27

En tu código original el problema está en que estás tratando de obtener los valores a través de los id de los elementos "p" y no de los "input", además faltaba cerrar el <form>, prueba con esto:

Código HTML:

<script type="text/javascript">

var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;

function validacion() {
if( !(/w{1,}[@][w-]{1,}([.]([w-]{1,})){1,3}$/.test(email)) ) {
return false;
}

else if( pass == null || pass.length == 0 || /^s+$/.test(pass) ) {
return false;
}else{
return true;
}
}
</script>
</head>

<body>

<div id="login">
<form id="cont" action="login.php" method="post">
<h2>4 decision</h2>

        <p >E-mail: <input id="email" type="text" name="email" value=""></p>
        <p >Password: <input id="pass" type="password" name="password" value=""></p>
        <br />
<input class="boton" type="button" value="Login" onClick="validacion();">  
</form>

donfalcone · #8 (**permalink**) 11/02/2008, 04:37

Gracias! Poco a poco va tomando buena pinta.

Os paso de nuevo el código, tal y como ahora esta:

Código PHP:

  <script type="text/javascript">

 
var email = document.getElementById("email").value;

var pass = document.getElementById("pass").value;

 
function validacion() {

if( !(/w{1,}[@][w-]{1,}([.]([w-]{1,})){1,3}$/.test(email)) ) {

alert('mail incorrecto');

return false;

}

 
else if( pass == null || pass.length == 0 || /^s+$/.test(pass) ) {

alert('pass incorrecto');

return false;

}else{

return true;

}

}

</script>

Este es el código del formulario

Código PHP:

    <form id="cont" action="login.php" method="post" onsubmit="validacion()">

        <p>E-mail: <input id="email" type="text" name="e-mail" value="" /></p>

 
        <p>Password: <input id="pass" type="password" name="password" value="" /></p>

        

        <input class="boton" type="submit" value="Login" />

La situación actual:

siempre me aparece el mensaje 'alert' email incorrecto, aunque ponga un email correcto
aunque deje los campos vacíos, me redirecciona a login.php. Es decir, me loguea con éxito.

Muchas gracias por vuestra ayuda.
Saludos!

#9 (**permalink**) 11/02/2008, 04:53

Tienes que meter la lectura de los campos dentro de la función de validación. Si no, da igual lo que pongas en los campos.

Es decir, en lugar de...

Código HTML:

<script type="text/javascript">

var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;

function validacion() {
    if( !(/w{1,}[@][w-]{1,}([.]([w-]{1,})){1,3}$/.test(email)) ) {
        alert('mail incorrecto');
        return false;
    }
    //...

Tienes que poner:

Código HTML:

<script type="text/javascript">
function validacion() {

    var email = document.getElementById("email").value;
    var pass = document.getElementById("pass").value;

    if( !(/\w+[@][\w-]+([.]([\w-]+)){1,3}$/.test(email)) ) {
        alert('mail incorrecto');
        return false;
    }
    //...

donfalcone · #10 (**permalink**) 11/02/2008, 05:18

Gracias por tu respuesta Venkman,... pero tampoco me funciona. Además creo que cuando las variables se definen con el prefijo 'var' pasan a ser globales. Con lo cual es indiferente que estén dentro o fuera de la función. O al menos eso tengo entendido.

Pero, como te digo probé tal y como tu escribes, y tampoco funciona.

Gracias igualmente,
Saludos!

#11 (**permalink**) 11/02/2008, 06:20

No tiene nada que ver que las definas como globales o locales o les pongas var. El problema que te indicaba es que cuando tienes que leerlas, cuando tienes que hacer la carga del valor que tienen los campos es cuando llames a validar.

Prueba a poner en tu función validar un alert(email) nada más empezar. Hazlo poniendo las líneas dentro y fuera, y verás la diferencia.

Por lo demás, la expresión regular que estás poniendo, está mal. Tienes que ponerles \ a las w:
/\w+[@][\w-]+([.]([\w-]+)){1,3}$/

O eso, o utiliza las que te ha puesto antes codigojavascript, que son más completas.

(Además, no, cuando les pones var dentro de una función, las variables son locales a la función. Pero como digo, no se trata de cómo sean las variables sino de cuándo estás leyendo los valores de email = document.getElementById("email").value;)

caricatos · #12 (**permalink**) 11/02/2008, 06:34

Hola:

En el primer mensaje pusiste bien la validación pero en el sitio incorrecto... no debes olvidarte del return sino no sirve de nada, y sobre las variables globales o no, la forma de validar siempre recomiendo que sea de esta forma:
<form onsubmit="return validar(this)"...

Los detalles a considerar son: aparte de ponerlo en el tag form, no olvidarse del return antes de la función validadora, y fíjate en el this como parámetro, con ese detalle, en la validación referencias el formulario, y basta con poner detrás un punto, seguido del nombre de los campos para referenciarlos:

Ejemplo:
function validar(f) {
return f.campo.value != "";
}

No puse tu formulario porque solo quiero aclarar como debe validarse (al menos la forma que yo recomiendo)

Saludos

donfalcone · #13 (**permalink**) 11/02/2008, 08:13

....Lo siento caricatos, pero no sé si lo he entendido del todo bien. Es decir, me ha parecido entenderlo, pero al ejecutarlo me doy cuenta que no lo he entendido

.

este es script actual:

Código PHP:

  <script type="text/javascript">
function validacion(f) {
var email = f.e-mail.value;
var pass = f.password.value;

var valid1 = /(@.*@)|(..)|(@.)|(.@)|(^.)/;
var valid2 = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;

if (valid1.test(email) | !valid2.test(email)) {
alert('email no válido');
return false;
}

else if( pass == null || pass.length == 0 || /^s+$/.test(pass) ) {
alert('necesitas una contrasena');
return false;
}else{
return true;
}
}
</script>

y este el del form:

Código PHP:

  <form id="cont" action="login.php" method="post" onsubmit="return validacion(this)"> 
        <p>E-mail: <input id="email" type="text" name="e-mail" value="" /></p>

        <p>Password: <input id="pass" type="password" name="password" value="" /></p>
        
        <input class="boton" type="submit" value="Login" />

Básicamente, lo quiero es con este código comprobar si el usuario escribe un e-mail que pueda ser válido, y una contrasena.
Y si fuera así enviarlo a login.php donde corroboró con la base de datos si el usuario en sí está o no registrado.

Con el script de JS que arriba describo, se puede acceder cuando no se escribe nada. En resumen, no funciona.

Muchas gracias de antemano por la ayuda.
Saludos!

donfalcone · #14 (**permalink**) 11/02/2008, 09:53

Hola!

Lo conseguí!

Este es el script con el que funciona:

Código PHP:

  <script language="javascript">

 
function validacion(s) {

 
var email = s.email.value;

var pass = s.password.value;

 
var valid1 = /(@.*@)|(..)|(@.)|(.@)|(^.)/;

var valid2 = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/;

 
if (valid1.test(email) | !valid2.test(email)) {

reafirma();

return false;

}

if(pass == null || pass.length == 0 || /^s+$/.test(pass)) {

reafirma2();

return false;

}

else {

return true;

}

 
}

function reafirma(){

var r = document.createElement("span");

var text = document.createTextNode("[B]Email no válido[/B]");

r.appendChild(text);

var ant = document.body.getElementsByTagName("img")[0];

document.body.insertBefore(r,ant);

}

 
function reafirma2(){

var r = document.createElement("span");

var text = document.createTextNode("[B]debes escribir password[/B]");

r.appendChild(text);

var ant = document.body.getElementsByTagName("img")[1];

document.body.insertBefore(r,ant);

}

</script>

formulario:

Código PHP:

  <form id="cont" action="login.php" method="post" name="form" onsubmit="return validacion(this)">

                        <p id="email">E-mail: <input id="col" type="text" name="email" value="" /></p>

        <p id="pass">Password: <input id="col1" type="password" name="password" value="" /></p>

        <p><input class="boton" type="submit" value="Login" /></p>

La curiosidad del tema es que cuando se aplica la funcion reafirma, no me funciona poniendo:

Código PHP:

  document.body.getElementsByTagName("p")[1]

por lo que poniendo

Código PHP:

  document.body.getElementsByTagName("img")[1]

me funciona. ????

Alguien sabe como puede hacerlo más correctamente para situar estos elementos donde yo quiera, y no donde quiera el script.

Y cómo hacer que sólo sea posible una vez,... ya que si el email o password está mal, se siguen escribiendo en la página.

Muchas gracias a todos!
Saludos!