Validar form con javascript

hgp147 · #1 (**permalink**) 30/11/2007, 20:36

Hola, queria saber como podia hacer para que cuando valido un formulario con javascript, al hacer clic en el boton de enviar, me aperezca debajo de los input de texto por ejemplo: "La longitud es invalida"...etc. Es decir como hace hotmail.com en la parte de registro. (Pero que los mensajes de error aparezcan al hacer clic en el boton enviar)

Gracias!

JavierB · #2 (**permalink**) 01/12/2007, 04:20

Hola hgp147

A ver si te sirve este ejemplo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function validar(frm) {
  if (frm.pepe.value.length < 4) {
   document.getElementById('error').style.visibility = 'visible';
   return false;
  }
}
</script>
</head>
<body>
<form onsubmit="return validar(this)">
<input type="text" name="pepe" />
<p id="error" style="visibility:hidden">Longitud inválida</p>
<input type="submit" />
</form>
</body>
</html>

Saludos,

hgp147 · #3 (**permalink**) 01/12/2007, 09:31

Hola JavierB, gracias por el código, era justo lo que quería. Pero tengo una duda: al intentar agregar otro campo de texto, solamente me valida el primero y el otro no. Aca dejo el código:

Código HTML:

<html>
<head>
<script type="text/javascript">
function validar(frm) {
  
  if (frm.pepe.value.length < 4) {
   document.getElementById('error').style.visibility = 'visible';
   return false;
   } 
   
   
   if (form.pepe2.value.length < 4) {
   document.getElementById('error2').style.visibility = 'visible';
   return false;
   } 
   
}
</script>
</head>
<body>
<form action="procesa.php" method="post" onsubmit="return validar(this)">

<input type="text" name="pepe" />
<p id="error" style="visibility:hidden">Longitud inválida</p>

<input type="text" name="pepe2" />
<p id="error2" style="visibility:hidden">Longitud inválida2</p>

<input type="submit" />
</form>
</body>
</html>

Snd234 · #4 (**permalink**) 01/12/2007, 12:42

Si la primera validación da true (es decir, da error), entraras al IF y luego finalizara el script, con el return.

Para que la segunda validación se realice, la primera tendría que dar false (sin errores)...

Y lo otro, tu función recibe como parámetro el formulario con el nombre frm, y en la primera validación accedes al elemento pepe a través de frm.pepe, en cambio con la segunda validación tratas de acceder a pepe2 a través de form.pepe2, siendo que debería ser frm.pepe2.

hgp147 · #5 (**permalink**) 01/12/2007, 13:14

Gracias Snd234 por la explicacion. Y como podria hacer para que aparezcan todos los errores a la vez? Es decir que si pongo en los 2 campos algo incorrecto, solo me pondra un error en el primero y quiero que aparezcan el error en los dos. Otra duda es como podia hacer para que desaparezca el texto que dice el error cuando los datos del campo son corregidos (despues de hacer clic en el submit).

Espero que se haya entendido.

Gracias

Snd234 · #6 (**permalink**) 01/12/2007, 16:11

Para lo primero, que muestre todos los mensajes de error, tienes que quitarle los return en las validaciones y dejarla al final, de esta forma la funciona realizara todas las validaciones y mostrara los mensajes correspondientes.

Pero habria que saber si hubieron errores o no en las validaciones, entonces, si la primera validación es false (con error), guardar ese resultado en una variable resultado1, lo mismo para las demás validaciones, donde habrá una variable resultado2, resultado3, etc. que guarde los resultados.

Luego, al terminar todas las validaciones hay que evaluar esos resultado, usando return(resultado1 && resultado2); donde retornara false en general si una sola validación dio false (con error), y de esta forma no se enviara el formulario.

Para ocultar los mensajes, tendrías que agregarle la sentencia ELSE a las validaciones, realizando la acción contraria, es decir, ocultándola. Y además, asignando true a la variable de resultado de esa validación.

En resumen, tu código seria:

Código PHP:

  <script type="text/javascript">
function validar(frm) {
    var resultado1 = true;
    var resultado2 = true;
    
    if (frm.pepe.value.length < 4) {
        document.getElementById('error').style.visibility = 'visible';
        resultado1 = false;    // Error
    }
    else {
        document.getElementById('error').style.visibility = 'hidden';
        resultado1 = true;    // Sin error
    }
   
    if (frm.pepe2.value.length < 4) {
        document.getElementById('error2').style.visibility = 'visible';
        resultado2 = false;    // Error
    }
    else {
        document.getElementById('error2').style.visibility = 'hidden';
        resultado3 = true;    // Sin error
    }
    return(resultado1 && resultado2);
}
</script>

hgp147 · #7 (**permalink**) 01/12/2007, 17:15

Gracias nuevamente Snd234, excelente la explicación y el código. Funciona perfecto!

caricatos · #8 (**permalink**) 02/12/2007, 01:45

Hola:

Muchas líneas que pueden simplificarse:

Código:

function validar(frm) {
  var resultado1 = frm.pepe.value.length > 3;
  var resultado2 = frm.pepe2.value.length > 3;
  document.getElementById('error').style.visibility = (resultado1) ? 'hidden':'visible';
  document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible';
  return  (resultado1 && resultado2);
}

Saludos

hgp147 · #9 (**permalink**) 02/12/2007, 12:17

Hola caricatos, muy bueno tu aporte.!!!!!!

hgp147 · #10 (**permalink**) 02/12/2007, 21:08

Hola de nuevo, me quedo una última duda: cómo podría hacer para que cuando aparece el mensaje de error, además se ponga de color rojo el borde del input de texto. Y que cambie a color negro cuando los datos introducidos sean correctos.

Nose como incorporar este código al código dado por caricatos...

document.getElementById('input').style.bordercolor = 'red'

<input type="text" name="pepe" id="input"/>

Gracias

caricatos · #11 (**permalink**) 02/12/2007, 23:47

Hola:

Cuando los estilos son compuestos (esos que en la sección style se escriben con algún guión), en javascript debes quitar ese guión y capitalizar la letra siguiente... o sea que quedaría asi

document.getElementById('error').style.borderColor = (resultado) ? 'black':'red';

Tal vez tengas que invertir los colores (los puse tal como lo entendí)

Saludos

hgp147 · #12 (**permalink**) 03/12/2007, 08:27

Gracias otra vez caricatos, fuciona muy bien.

Se puede resumir más este código? (Le agregue que también cambie a color rojo el texto cuando los datos son incorrectos)

Código HTML:

<html>
<head>
<script type="text/javascript">


function validar(frm) {
  var resultado1 = frm.pepe.value.length > 3;
  var resultado2 = frm.pepe2.value.length > 3;
  document.getElementById('error').style.visibility = (resultado1) ? 'hidden':'visible';
  document.getElementById('input').style.borderColor = (resultado1) ? 'black':'red';
  document.getElementById('input').style.color = (resultado1) ? 'black':'red';
  
  document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible';
  document.getElementById('input2').style.borderColor = (resultado2) ? 'black':'red';
  document.getElementById('input2').style.color = (resultado2) ? 'black':'red';
    
  return  (resultado1 && resultado2);
}
</script>  
</head>
<body>
<form action="procesa.php" method="post" onsubmit="return validar(this)">

<input type="text" name="pepe" id="input" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error" style="visibility:hidden">Longitud inválida</p>

<input type="text" name="pepe2" id="input2" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error2" style="visibility:hidden">Longitud inválida2</p>

<input type="submit" />
</form>
</body>
</html>

Bier · #13 (**permalink**) 03/12/2007, 18:00

Excelente aporte, funciona de maravilla.

Podrías cambiar el segundo campo para que obligue a sea una direccion de email ?

Saludos

hgp147 · #14 (**permalink**) 03/12/2007, 18:38

Hola Bier, Sería así:

Código HTML:

<html>
<head>

<script type="text/javascript">

function validar(frm) {

  var resultado1 = frm.pepe.value.length > 3;
  var resultado2 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})$/.test(frm.pepe2.value);
  
  document.getElementById('error').style.visibility = (resultado1) ? 'hidden':'visible';
  document.getElementById('input').style.borderColor = (resultado1) ? 'black':'red';
  document.getElementById('input').style.color = (resultado1) ? 'black':'red';
  
  document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible';
  document.getElementById('input2').style.borderColor = (resultado2) ? 'black':'red';
  document.getElementById('input2').style.color = (resultado2) ? 'black':'red';
    
  return  (resultado1 && resultado2);
}

</script>

</head>
<body>
<form action="procesa.php" method="post" onsubmit="return validar(this)">

<input type="text" name="pepe" id="input" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error" style="visibility:hidden">Longitud inválida</p>

<input type="text" name="pepe2" id="input2" style="border-width: 1px; border-style: solid; border-color: black"/>
<p id="error2" style="visibility:hidden">E-mail inválido</p>

<input type="submit" />

</form>

</body>
</html>

Bier · #15 (**permalink**) 03/12/2007, 18:56

Eres un mago hgp147,
Saludos

hgp147 · #16 (**permalink**) 03/12/2007, 19:00

Gracias Bier, hay que decir también que sin la ayuda de JavierB, Snd234 y caricatos no hubiera sido posible.

caricatos · #17 (**permalink**) 04/12/2007, 01:13

Cita:

Iniciado por hgp147

...
Se puede resumir más este código? (Le agregue que también cambie a color rojo el texto cuando los datos son incorrectos)
...

Aunque me parece difícil resumir ese código, para las asignaciones condicionales se pueden crear variables del tipo array indexadas por valores lógicos (true/false) por ejemplo:

Código:

var visible = new Array(); visible[false] = "hidden"; visible[true] = "visible";

Y para simplificar se puede crear un alias del document.getElementById... a mi me gusta usar tag:

Código:

function tag(id) {return document.getElementBtId(id);}

Con eso, se podría luego poner:

Código:

with(tag("error")).style 
	visibility = visible[resultado1];

Como expuse antes no resumimos nada, pero sí que se puede conseguir más legibilidad

Saludos

hgp147 · #18 (**permalink**) 04/12/2007, 12:38

Gracias caricatos por tu ayuda! Sabes un montón

thepancher · #19 (**permalink**) 07/12/2008, 18:50

Hola, muy bueno el script, me sirvio... Pero tengo una pregunta ya que soy medio burro... Como validamos un checkbox? O sea, si el checkbox no esta con el tic, de error, y si esta clikeado, q pase .... que le tengo q agregar?

saludos y espero q me ayuden xD

kurroman · #20 (**permalink**) 07/12/2008, 19:12

Has pensado la posibilidad de usar JQuery con Validate y Forms?

caricatos · #21 (**permalink**) 08/12/2008, 00:06

Hola:

Tanto para los checkboxes como para los radios, la forma de validar es consultando su atributo checked... se pone a true cuando está chequeado y falso en el caso contrario.

if (elemento.cheched == true) o de forma simplificada if (elemento.checked)...

Como el tema es viejo paso a cerrarlo

, y si no sirve la respuesta no dudes en abrir un tema nuevo, siempre puedes referenciar los temas viejos.

Saludos