sigo con problemas con la validación de campos

[LadyArwen]

hola. sigo con problemas con la validación de campos de un formulario. a ver. tengo un formulario con dos campos, uno es el campo 'email' y el otro es el campo 'password'. para resumir el tema, yo lo que quiero es lo siguiente:

1) que si el campo 'email' está vacío o contiene caracteres extraños o no tiene la arroba, etc... salga el mensaje 'Campo email obligatorio. Asegúrese que el email es válido', pero no mediante alert, sino en la misma pantalla, debajo del campo.

2) que si el campo 'password' está vacío o tiene menos de 5 caracteres, salga el mensaje 'Campo password obligatorio. Debe tener al menos 5 caracteres'.

3) que si cualquiera de los dos campos (o los dos a la vez) están vacíos, o si el password tiene menos de 5 caracteres o si el email contiene caracteres extraños o no tiene la arroba, el botón enviar aparezca deshabilitado.

bien. el tema está en que el punto 1) y el punto 2) lo tengo conseguido (gracias eso sí a vuestra inestimable ayuda). pero lo que no logro es lo siguiente:

a) del punto 2, obligar a que el campo password tenga al menos 5 caracteres.
b) del punto 3, deshabilitar el botón si no se cumple lo de los 5 caracteres en el password o no introduce un email válido, pues ahora mismo únicamente lo consigo deshabilitar sólo si uno de los campos (o los dos a la vez) están vacíos.

el código que utilizo para todo esto es el siguiente:

FUNCIONES

Código HTML:

<script language="JavaScript"> 

///valida campos no vacíos
function valida(c)
{
var i,v;
if(c)
 {
 i=c.name+"obl";
 (c.value.length<5)?v="visible":v="hidden";
 document.getElementById(i).style.visibility=v;
 }
}
///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((clientes.email.value != "") && (clientes.password.value != ""))
    { clientes.B1.disabled = false; }


    else 
	{ clientes.B1.disabled = true; }
}
</script> 

FORMULARIO:

Código HTML:

<form method="post" action="procesar.php" name="clientes">
<tr>
<td>
email:</td>
<td>
<input type="text" name="email" onKeyUp="deshabilita(this.form);" onblur="document.getElementById('emailobl').style.visibility =(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.value)) ? 'hidden' : 'visible';"></td>
</tr>
<tr>
<td  id="emailobl" style="visibility:hidden;"><b>Campo email obligatorio. Asegúrese que el email es válido</b></td>
</tr>
<tr>
<td>
password:</td>
<td>
<input type="password" name="password" onKeyUp="deshabilita(this.form);"  onBlur="valida(this);"></td>
</tr>
<tr>
<td id="passwordobl" style="visibility:hidden;"><b>Campo password obligatorio. Debe tener al menos 5 caracteres</b></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" valueenviar" name="B1" disabled></td></tr> 

qué hago?

[LadyArwen]

nada, ninguna idea?

[caricatos]

Hola:

Parece que tenemos que hacerte la validación... ¡vayamos por partes! (dijo Jack)... Al menos lo del email te funciona (creo que te he ayudado en ello), así que vamos a intentar ayudarte...

Lo de deshabilitar no recuerdo haberlo visto (en el otro mensaje)

En informática (al menos durante los cursos universitarios) nos inculcan la frase "divide y vencerás", así que vamos a separar las 2 validaciones posibles... la del email podría ser:

function validaEmail(x) {
valida = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(x.value);
document.getElementById('emailobl').style.visibili ty = (valida) ? 'hidden':'visible';
return valida;
}

function validaPass(x) {
valida = x.value.length < 5;
document.getElementById('passwordobl').style.visib ility = (valida) ? 'hidden':'visible';
return valida;
}

Ahora (si esto está bien), debemos mezclar...

creo que en deshabilite debería haber algo así:

function deshabilita(form)
form.B1.disabled = validaPass(form.password) && validaEmail(form.email);
}

Acabo de descubrir que usas un elemento "cliente" que debería ser "form"

Espero haberte ayudado.

Saludos

[LadyArwen]

hola caricatos. a ver, desgraciadamente (no te lo tomes a mal) no tengo ni los conocimientos (ya quisiera yo) ni la experiencia que tienes tú. poco a poco los voy adquiriendo. no creas que voy a un copia y pega sin tratar de estudiar el código que me facilitáis.

bien. dicho esto, ya he conseguido que el botón 'enviar' siga deshabilitado en estos tres casos:

1) si el campo email está vacío
2) si el campo password está vacío
3) si el campo password tiene menos de 5 caracteres.

lo que no consigo es que siga deshabilitado si no se mete un email (con arroba y demás) en el campo email.

lo que utilizo es esta función:

Código HTML:

///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((form.email.value != "") && (form.password.value != "") && (form.password.value.length>=5))
    { form.B1.disabled = false; }


    else 
	{ form.B1.disabled = true; }
}

qué tendría que meter en esa función para que si el campo email no tiene un formato válido no se active el campo enviar?

[caricatos]

Iniciado por LadyArwen

hola caricatos. a ver, desgraciadamente (no te lo tomes a mal) no tengo ni los conocimientos (ya quisiera yo) ni la experiencia que tienes tú. poco a poco los voy adquiriendo. no creas que voy a un copia y pega sin tratar de estudiar el código que me facilitáis.

bien. dicho esto, ya he conseguido que el botón 'enviar' siga deshabilitado en estos tres casos:

1) si el campo email está vacío
2) si el campo password está vacío
3) si el campo password tiene menos de 5 caracteres.

lo que no consigo es que siga deshabilitado si no se mete un email (con arroba y demás) en el campo email.

lo que utilizo es esta función:

Código HTML:

///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((form.email.value != "") && (form.password.value != "") && (form.password.value.length>=5))
    { form.B1.disabled = false; }


    else 
	{ form.B1.disabled = true; }
}

qué tendría que meter en esa función para que si el campo email no tiene un formato válido no se active el campo enviar?

Prueba con:

Código:

function deshabilita(form)
{
valida = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(foem.email.value);

    if ((valida) && (form.password.value != "") && (form.password.value.length>=5))
    { form.B1.disabled = false; }
    else 
	{ form.B1.disabled = true; }
}

He retocado tu código... no estoy seguro de que debas usar "valida" o su negación (!valida)

Cuéntanos como te va...

Saludos

[LadyArwen]

gracias de nuevo caricatos, pero nada. utilizando la función que tú me das (ya previamente había optado yo por esa opción pero creía que fallaba yo en algo y ahora veo que es que debe haber algo que no va bien), me da un error de "el objeto no admite esa propiedad" (tanto con "valida" ni con su negación "!valida"). por dios, me estoy volviendo loca con esta tontería...

[caricatos]

Hola:

Acabo de ver que copié mal la palabra form:

valida = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value);

Pruébalo y nos cuentas...

Saludos

[LadyArwen]

no, no es eso. ya me había dado cuenta y ya había corregido yo el error, pero nada. da ese error. como te digo, ya había optado yo por esta solución pero creía que estaba equivocada, que cometía algún error. obviamente, si tú me das esta misma solución es que debe ser así, pero algo falla, y no sé qué es.
en el botón enviar tengo esto por si vale de algo:

Código HTML:

<input type="submit" value="enviar" name="B1"  disabled> 

[Holden]

Hola, no me quiero meter en sus explicaciones pero tal vez te venga bien mirar esta librería es simple de utilizar...

Te abstraes de la implementación de la validación. simplemente serían estas lineas...

Validar.Longitud("txtPasswd", ">", 4, "El nombre de usuario debe ser mayor a 4 caracteres")

Validar.Vacio("txtNombre", "El nombre/apellido no puede ser vacio");


Te dejo los enlaces:

este es el ejemplo:
http://www.hvaldez.com.ar/proyectos/...sion%20normal/

este es el blog donde voy actualizando las cosas y tenes un ejemplo mas:
http://www.hvaldez.com.ar/blogs/index.php?blog=8&more=1

Saludos

[LadyArwen]

hola holden. no, no me vale la historia. el tema de la validación como os digo ya lo tengo (yo no quiero que salga la típica ventanita o pop up del alert). el problema está en que el botón enviar se activa cuando no debería. es decir, el botón 'enviar' debería estar desactivado si se dan alguna (individualmente o a la vez) de las siguientes circunstancias:

1) que el visitante deje el campo 'email' vacío.
2) que el visitante deje el campo 'password' vacío.
3) que el visitante introduzca un password de menos de 5 caracteres.
4) que el visitante introduzca un email no válido.

si se da alguna de estas circunstancias (individualmente, todas a la vez o cualquier combinación de ellas), el botón 'enviar' (que es type="submit") aparecerá desactivado. en caso contrario (si ninguna de las circunstancias anteriores se dan) querrá decir que el formulario está bien cumplimentado y que el visitante podrá enviar el mismo.

yo tengo conseguido hasta el punto 3: es decir que si se dan ya sea individualmente, las 3 a la vez o cualquier combinación de las tres primeras circunstancias, el botón 'enviar' aparece desactivado. pero no consigo la cuarta. es decir, yo puedo introducir un email sin la @ en el campo email y luego en el campo password cumplimentarlo correctamente (es decir, no dejarlo en blanco y que el password que introduzco tenga al menos 5 caracteres) y con eso, sólo con hacer correctamente el campo password, metiendo algo en el campo email, aun estando mal, el botón enviar aparece activado. y yo lo que quiero es que si el campo email está mal (porque falta la @ o meta símbolos no válidos, etc...) por mucho que el campo password cumpla las condiciones, el botón 'enviar' aparezca desactivado.

os vuelvo a poner la función que utilizo para conseguir que en las tres primeras circunstancias se cumpla lo que quiero:

Código HTML:

///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((form.email.value != "") && (form.password.value != "") && (form.password.value.length>=5))
    { form.B1.disabled = false; }


    else 
	{ form.B1.disabled = true; }
}

[LadyArwen]

alguna idea o solución?

[Holden]

fijate la clase que te pase alli tiene la regex para validar los emails.

Nota que en tu línea de
form.password.value != ""
Si alguien ingresa " " lo dá como válido y tal vez no sea así.
Te convendría usar una regex tambien.

Saludos

[LadyArwen]

no, no lo cojo....

[LadyArwen]

con la función que yo he puesto no hay nadie que me pueda orientar?

[Holden]

No digo que uses la clases sino que copies la forma de hacer la validación...

Con esto te dice si es valido o no.
le pasas el id del textbox.

function ValidarEmail(field)
{
var retVal = true;
var email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if (!email.test(document.getElementById(field).value) )
{
retVal = false
}
return retVal;
}

[LadyArwen]

no, no me entiendes, holden. yo ya tengo la validación para que el campo email sea neceario meter una expresión de email correcta. ya te digo que esa validación la tengo. lo que no tengo es que el botón 'enviar' continue deshabilitado si en el campo email meto una expresión incorrecta. si lees mis últimos emails es lo único que me falta.

[Holden]

Iniciado por LadyArwen

no, no me entiendes, holden. yo ya tengo la validación para que el campo email sea neceario meter una expresión de email correcta. ya te digo que esa validación la tengo. lo que no tengo es que el botón 'enviar' continue deshabilitado si en el campo email meto una expresión incorrecta. si lees mis últimos emails es lo único que me falta.

en ningun lado veo que estes validando un formato de mail correcto:

Código HTML:

///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((form.email.value != "") && (form.password.value != "") && (form.password.value.length>=5))
    { form.B1.disabled = false; }


    else 
	{ form.B1.disabled = true; }
}

te esta faltando llamar a algo que valide el email o definitivamente sigo sin enteder tu problema.

[LadyArwen]

hola de nuevo holden. si lees de mis primeros mensajes en el post, verás mi formulario (una parte, hasta el campo email). como verás, en el input de ese campo aparece la validación:

Código HTML:

<form method="post" action="procesar.php" name="form">
<tr>
<td>
email:</td>
<td>
<input type="text" name="email" onKeyUp="deshabilita(this.form);" onblur="document.getElementById('emailobl').style.visibility =(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.value)) ? 'hidden' : 'visible';"></td>
</tr> 

como ves, la validación está. ahora, cómo hago lo otro? qué tengo que meter en la función deshabilitar?

[LadyArwen]

por favor, alguna idea?

[Holden]

Asi?
Prueba el ejemplo directamente.

Código HTML:

<script language="JavaScript"> 
///valida campos no vacíos
function valida(c)
{
//alert("validando");
var i,v;
if(c)
 {
 i=c.name+"obl";
 (c.value.length<5)?v="visible":v="hidden";
 document.getElementById(i).style.visibility=v;
 }
}
///deshabilita botón enviar si campos vacíos
function deshabilita(form)
{
    if ((clientes.email.value != "") && (clientes.password.value != "") && (clientes.password.value.length >= 5) && ValidarEmail("email") )
    { 
		clientes.B1.disabled = false; 
	} 
    else 
	{ 
		clientes.B1.disabled = true; 
	}
}

function ValidarEmail(field)
{
var retVal = true;
var email = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if (!email.test(document.getElementById(field).value) ) 
{
retVal = false
}
return retVal; 
}

</script>
<form method="post" action="procesar.php" name="clientes">
<table>
<tr>
<td>
email:</td>
<td>
<input type="text" name="email" onKeyUp="deshabilita(this.form);" onblur="document.getElementById('emailobl').style.visibility =(ValidarEmail('email')) ? 'hidden' : 'visible';"></td>
</tr>
<tr>
<td  id="emailobl" style="visibility:hidden;"><b>Campo email obligatorio. Asegúrese que el email es válido</b></td>
</tr>
<tr>
<td>
password:</td>
<td>
<input type="password" name="password" onKeyUp="deshabilita(this.form);"  onBlur="valida(this);"></td>
</tr>
<tr>
<td id="passwordobl" style="visibility:hidden;"><b>Campo password obligatorio. Debe tener al menos 5 caracteres</b></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" valueenviar" name="B1" disabled></td>
</tr>
</table>
</form> 

[Holden]

Y como le fue con eso?