Validar Formulario

Citar

Escrito el 05 Jun 2008 04:26 pm

hola! bueno quisiera saber mas o menos como puedo hacer para validar un formulario, con varios input, quiero al salir del input, creo q seria cuando tiene o no foco, valide los campos. Tambien como seria para comparar la contraseña, o sea el repetir contraseña.

Desde ya gracias y saludos.

Por nehuen

43 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 05 Jun 2008 09:11 pm

Puedes utilizar la propiedad onChange de javascript para validarlo cada vez que el campo pierda el foco y el texto halla sido cambiado dentro de él. En cuanto al resto del proceso de validación, hay muchas maneras de hacerlo, puedes probar dando una búsqueda en google, seguro encontrarás muchas opciones.

Por Odin

Claber

639 de clabLevel

2 tutoriales

Genero:Masculino Premio_Secretos

Envíale un mensaje privado Web

El valle de las hamacas

@odinjv

Citar

Escrito el 06 Jun 2008 12:56 am

por ejemplo, para el repetir contraseña, es algo así:

Código :

if(document.getElementById('id_del_input_del_pass').value!=document.getElementById('id_del_input_de_la_repet').value)
{document.getElementById('id_del_div_de_validacion').innerHTML+='Las contraseñas no son iguales'; return false;}

Como te dice Odin, el tema es demasiado extenso como para resolvertelo entero...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 06 Jun 2008 02:15 am

Muchas gracias!.
Sis estoy mirando y probando un poco. Espero q m salga.
Hasta ahora m salio esto...

Código :

<input name="campo" type="text" onBlur="Reacciona(this)" />

// java.js
function Reacciona(elemento) {
   alert('Comentario vacio!.');
}

Si alguien me da una idea o una manito se lo agradezco

Por nehuen

43 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 Jun 2008 08:24 am

Para validar, lo que me gusta ver es:

Que el resultado de la validación se muestra en tiempo real, antes de dar al "submit"
(prefiero hacerla mediante "onkeyup" para la validación de contraseñas)

<input type="password" onkeyup="javascript:valida(false);" />
Que el resultado NO SE MUESTRE EN UN ALERT; sino en un DIV al inicio o final del formulario, con los resultados de la misma.
(o mejor aún, que se indique al lado de cada input, o incluso de ambas maneras, pero NUNCA EN UN ALERT)
Que cuando se apriete "submit", se haga una útlima validación:
eso se arregla así:

<input type="submit" onclick="javascript:valida(true);" />
Que después de todo, se vuelva a hacer una validación del lado del servidor
(esto es imprescindible, pues el javascript se puede "apagar").

un esquema de lo dicho, sería:

Código :

<html>
<head>
<script>
function valida(boolean)
{var RESULTADO='';
 if(/*validación!=correcta*/){RESULTADO+='información del error';} //se ponen tantas condiciones como se necesite
 document.getElementById('div_resultado').innerHTML=RESULTADO;     //al final, se muestra el "RESULTADO"
 if(boolean) //si boolean=true -> decide si se manda o no el form.
             //si boolean=false -> no manda el formulario, independientemente del resultado de la validación.
      {
       if(RESULTADO!=''){return false;}  //cuando se ha almacenado un error (en "RESULTADO"), se detiene el envío.
      }
}
</script>
</head>
<body>
<form>
<input type="input" onchange="javascript:valida(false);" />
<textarea onchange="javascript:valida(false);"></textarea>
<input type="password" onkeyup="javascript:valida(false);" />
<input type="submit" onclick="javascript:valida(true);" />
</form>
<div id="div_resultado" style="color:red;"></div>
</body>
</html>

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 06 Jun 2008 02:01 pm

Gracias!!.
Me quede aca...

Código :

<html>
<head>
<script>
function valida(elemento){
var RESULTADO="";
var error=false;
if(form.texto.value.length < 3) { RESULTADO+='Mensaje texto. <br />'; error=true;}
if(form.textarea.value.length < 3) { RESULTADO+='Mensaje textArea. <br />'; error=true;}
if(error==true){
elemento.style.border=(RESULTADO!="")?"1px solid #FF0000":"none"; 
area=document.getElementById("div_resultado");
area.style.background=(RESULTADO!="")?"none":"none"; 
area.style.border=(RESULTADO!="")?"solid 0px red":"none"; 
area.innerHTML=RESULTADO;
return;
}
document.form.action="";
document.form.submit();
return;
}
</script>
</head>
<body>
<form name="form">
<input type="input" name="texto" onchange="javascript:valida(this);" /><br />
<textarea name="textarea" onchange="javascript:valida(this);"></textarea><br />
<input type="submit" onclick="javascript:valida();" /><br />
</form>
<div id="div_resultado"></div>
</body>
</html>

No se xq se disparan los dos msj, o sea d los dos campos. Cambio el valor d uno y m muesta los dos mensajes. Tmp se como hacer para q cambie d color (verde) el input cuando este sea mayor a 3. :crap:

Por nehuen

43 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 Jun 2008 02:49 pm

mmm...
te recomendaría que intentaras usar mi plantilla...

mezclas varios conceptos.
Te recomiendo que vayas punto por punto...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 06 Jun 2008 03:56 pm

Código :

<html>
<head>
<script>
function valida(boolean)
{var RESULTADO='';

if(document.form.texto.value ==""){RESULTADO+='información del error';} 
if(document.form.texto2.value ==""){RESULTADO+='información del error';}
 
document.getElementById('div_resultado').innerHTML=RESULTADO;
 if(boolean)
      {
       if(RESULTADO!=''){return false;}
      }
}
</script>
</head>
<body>
<form name="form" method="POST" action="?id=debates&tipo=save">
<input type="input" name="texto" onchange="javascript:valida(false);" /><br />
<input type="input" name="texto2" onchange="javascript:valida(false);" /><br />
<input type="submit" onclick="javascript:valida(true);" />
</form>
<div id="div_resultado" style="color:red;"></div>
</body>
</html>

Xq se disparan todos los campos al alterar uno solo¿?.
Esta bien asi?

Por nehuen

43 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 Jun 2008 06:00 pm

Porque cuando haces "onchange", se activa la función "valida()", que valida el formulario por completo.
Pero según vas terminando de rellenar, se van quitando los errores de validación.
( es una manera de ver, en tiempo real, lo que te va quedando. )

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 06 Jun 2008 06:59 pm

Esta bien

. Con el color como puedo hacer?. Agrego esta linea

Código :

elemento.style.border=(RESULTADO!="")?"1px solid #FF0000":"none";

Pero no se como hacer para q cuando "este bien" cambie d color

Por nehuen

43 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 Jun 2008 08:21 pm

Deberías hacer la validación para cada campo, y aplicarle el color a cada campo.
Para uno cualquiera, sería así:

Código :

document.getElementById('id_de_uno_cualquiera').style.borderColor = ( RESULTADO != '' ) ? 'red' : 'black';

Creo que es suficiente con el color, pues los demás atributos del borde (style, y width), son iguales en ambos estados.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 07 Jun 2008 12:28 am

Una pregunta

Código :

document.getElementById('id_de_uno_cualquiera').style.borderColor = ( RESULTADO != '' ) ? 'red' : 'black';

¿cual es la función del interrogante en ese código?, ¿ Por qué escribes los colores de este modo?

Código :

? 'red' : 'black';

Por Avaltel 2.0

22 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 07 Jun 2008 01:07 am

¿conoces el las estructuras de control de flujo?
Unas de ellas, son los condicionales: if-else
Existe el tradicional, y genérico:

if(condición) {acción1;}
else {accion2;}

Y también la versión abreviada:

condición ? accion1 : accion2 ;

Pero no son siempre intercambiables.
Si quieres poner:

A = condición

debes usar el modelo de "condensado":

A=(condicion)?resultado1:resultado2;

Si esto se quisiera conseguir con el if-else "tradicional", sería así:

if(condición)
{A=resultado1;}
else
{A=resultado2;}

Los colores los pongo abreviados, con su palabra, porque así me resulta más cómodo.
Pero si quieres precisión, debes usar la notación hexadecimal. (ej: #567500)

PD: veo que estás empezando con JavaScript.
Te recomeiendo:

rizome escribió:

[...] si quieres aprender en el metro, hazte con los manuales de ANAYA (a muy buen precio)

rizome escribió:

[...] pequeños (de bolsillo) y baratos (13-15€/unidad).
Son de la misma editorial... y de manejo casi diario.

[...]Lo ideal, sería que te lo tomaras con calma, y empezases poco a poco, como te digo, con una guía de JavaScript (te aconsejo la colección "Guía práctica para usuarios", de ANAYA)

...y un editor de texto plano (tipo "notepad", "notepad++", u otros como el Eclipse (junto con el Aptana), que te recomendará el maestro Aoyama)

Son fáciles de encontrar.
El de "CSS y DHTML" es una joya, y te ayudará a asentar los conocimientos que vayas adquriendo de Javascript.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Validar Formulario

Escribe una respuesta rapida