Ejemplo Validacion onSubmit

ZiTAL · #1 (**permalink**) 04/09/2006, 12:05

Bueno pues aqui teneis un ejemplo de validacion en un onSubmit, espero que os sirva:

Código HTML:

<html>
<head>
<title>Ejemplo Validacion</title>
<script type="text/javascript">
 function Validar(user,pwd)
  {
   user=document.getElementById(user);
   pwd=document.getElementById(pwd);
   if(user.value=="")
    {
     alert("El campo Nombre esta vacio");
     user.focus();
     return false;
    }
   else
    {
     if(pwd.value=="")
      {
       alert("El campo Passwd esta vacio");
       pwd.focus();
       return false;
      }
     else
      {
       return true;
      }
    }
  }
</script>
</head>
<body>
 <form name="formu" method="post" action="" onSubmit="return Validar('nombre','passwd')">
  <table>
   <tr><td>Nombre: </td><td><input type="text" name="nombre" id="nombre" /></td></tr>
   <tr><td>Passwd: </td><td><input type="password" name="passwd" id="passwd" /></td></tr>
   <tr><td colspan="2"><input type="submit" name="Conectate" value="Conectate" /></td></tr>
  </table>
 </form>
</body>
</html>

suerte a todos en los proyectos!!!!

Hay algo parecido en las FAQ's? Si no lo hay lo pongo, o que lo ponga alguien, ;)

caricatos · #2 (**permalink**) 04/09/2006, 16:33

Hola ZiTAL:

Veo que ya validas mucho mejor, pero prefiero que en las validaciones se use también el formulario y los objetos sean referenciados como parte del formulario, por su nombre y no por su id (aunque está claro que lo que propones está bien)

function Validar(f,user,pwd)
{
usuario=f[user];
passwd=f[pwd];
...

Y la llamada tal cual, pero como primer parámetro el objeto this...

Insisto en que no está mal como lo haces, pero me gusta más de esta otra manera... (solo es una opinión)

Sobre si está en las FAQs, creo que hay un sistema genérico de validación que no sé si lo has visto (al menos, yo lo suelo recomendar...)

Saludos

ZiTAL · #3 (**permalink**) 05/09/2006, 00:47

entonces como seria:

Código:

onSubmit(this,this[nombre],this[passwd])

asi?

KarlanKas · #4 (**permalink**) 05/09/2006, 01:14

No, ZiTAL. Lo que propone caricatos sería algo así:

onSubmit(this,'nombre','passwd');

añadir una variable más en la definición de la function. Es decir, pasar de:

function Validar(user,pwd){

a

function Validar(f,user,pwd){

y luego cambiar las líneas

user=document.getElementById(user);
pwd=document.getElementById(pwd);

por:

user=f[user];
pwd=f[pwd];

Espero habertelo aclarado.

Un saludo!

ZiTAL · #5 (**permalink**) 05/09/2006, 02:15

Entendido perfectamente ;)

KarlanKas · #6 (**permalink**) 05/09/2006, 02:17

Me alegro!

caricatos · #7 (**permalink**) 05/09/2006, 03:00

Hola:

La idea (mi opinión) es que la función sea reutilizable... otra de las posibilidades es que el nombre y número de campos a validar sea variable, entonces una variante podría ser así:

<html>
<head>
<script type="text/javascript">
function Validar() {
params = Validar.arguments;
f = params[0];
vale = true;
for (var i = 1, total = params.length; i < total; i++) {
if (f[params[i]].value == "") alert("debe rellenar el campo: " + params[i]);
vale = (vale && f[params[i]].value != "");
}
return vale;
}
</script>
</head>
<body>
<form name="prueba" onsubmit="return Validar(this, 'pepe', 'PisYCaca')" >
<input type="text" name="pepe" />
<input type="text" name="PisYCaca" />
<button type="submit">enviar formulario</button>
</form>
<body >
</body>
</html>

Por supuesto que el primero de los campos debe llamarse pepe...

Saludos

ZiTAL · #8 (**permalink**) 05/09/2006, 03:09

Eso ya es muchisimo mas interesante, voy a probarlo.

ZiTAL · #9 (**permalink**) 05/09/2006, 03:25

Funciona perfecto, tambien le hago una modificacion y es que lo vea de 1 en 1 y si el primero esta vacio que le de el foco y se termine la verificacion:

Código HTML:

<html>
<head>
<script type="text/javascript">
function Validar() 
 {
  params = Validar.arguments;
  f = params[0];
  for (var i = 1, total = params.length; i < total; i++) 
   {
    if (f[params[i]].value == "")
     {
      alert("debe rellenar el campo: " + params[i]);
      f[params[i]].focus();
      return false;
     }    
   }
}
</script>
</head>
<body>
<form name="prueba" onsubmit="return Validar(this, 'pepe', 'PisYCaca')" >
<input type="text" name="pepe" />
<input type="text" name="PisYCaca" />
<button type="submit">enviar formulario</button>
</form>
<body >
</body>
</html>

He probado en IE, Firefox y Opera. Funciona en todos.

ZiTAL · #10 (**permalink**) 05/09/2006, 04:58

El caso es que no paro con este script, le he añadido caracteres minimos independientemente por cada campo:

Código HTML:

<html>
<head>
<script type="text/javascript">
function Validar() 
 {
  params = Validar.arguments;
  var f = params[0];
  for (var i = 1, total = params.length; i < total; i++) 
   {
    var j=i+1;
    var min=parseInt(params[j]);
    if (f[params[i]].value.length < min)
     {
      alert("El campo " + params[i] + " por lo menos debe tener " + min + " caracteres");
      f[params[i]].focus();
      return false;
     }    
    i++;
   }
}
</script>
</head>
<body>
<form name="prueba" onsubmit="return Validar(this, 'pepe','5','PisYCaca','8')" >
<input type="text" name="pepe" />
<input type="text" name="PisYCaca" />
<button type="submit">enviar formulario</button>
</form>
<body >
</body>
</html>

Me parece que al final lo tendremos que hacer postit ;)

caricatos · #11 (**permalink**) 05/09/2006, 08:16

Hola:

Me gusta ver tu entusiasmo, y veo muy bien la evolución del tema...

Mi nuevo aporte tiene intención de ayudarte a simplificar el tema:

El último de los datos del bucle for es un incremento que puede hacerse con el incremento que se quiera... poniendo i = i + 2 puedes omitir el incremento que haces al final del bucle (i++)... y aún mejor, puedes hacer ese incremento en el momento que usas la variable por última vez...

f[params[i++]].focus();

Saludos

ZiTAL · #12 (**permalink**) 05/09/2006, 11:31

Hola aqui estoy aqui otra vez tocando las boulins ejjeejje, gracias caricatos (ahora lo he escrito bien ;)) tu aporte se ha añadido.

He añadido otra cosa y es que al cargar la pagina que coja el foco el primer elemento:

Código HTML:

<html> 
<head> 
<script type="text/javascript"> 
function Validar() 
 { 
  var params=Validar.arguments; 
  var f=params[0]; 
  for(var i=1,total=params.length;i<total;i=i+2) 
   { 
    var j=i+1; 
    var min=parseInt(params[j]); 
    if (f[params[i]].value.length<min) 
     { 
      alert("El campo " + params[i] + " por lo menos debe tener " + min + " caracteres"); 
      f[params[i]].focus(); 
      return false; 
     } 
   } 
 }
function CursorCarga()
 {
  document.forms[0].elements[0].focus();
 } 
</script> 
</head> 
<body onLoad="CursorCarga()"> 
<form name="prueba" onsubmit="return Validar(this, 'pepe','5','PisYCaca','8')" > 
<input type="text" name="pepe" /> 
<input type="text" name="PisYCaca" /> 
<button type="submit">enviar formulario</button> 
</form> 
</body> 
</html>

Ya esta quedando muy chulo el formulario e!!!

Este tambien he probado en IE, Firefox y en Opera y en todos funciona.

ZiTAL · #13 (**permalink**) 05/09/2006, 12:35

Modificaciones:
- comprueba que el e-mail tenga @ y un . El nombre debe tener "email"
- comprueba que si hay 2 passwords que sean iguales. Los nombres son password y password2.

aqui va:

Código HTML:

<html> 
<head> 
<script type="text/javascript"> 
function Validar() 
 {
  var params=Validar.arguments; 
  var f=params[0]; 
  for(var i=1,total=params.length;i<total;i=i+2) 
   { 
    var j=i+1; 
    var min=parseInt(params[j]); 
    if (f[params[i]].value.length<min) 
     { 
      alert("El campo " + params[i] + " por lo menos debe tener " + min + " caracteres");
      f[params[i]].focus(); 
      return false; 
     }
    else
     {
      if(params[i]=="email" && (f[params[i]].value.indexOf('@')==-1 || f[params[i]].value.indexOf('.')==-1))
       {
        alert("En el campo " + params[i] + " @ y . son obligatorios");
        f[params[i]].focus();
        return false;
       }
      else
       {
        var j=i-2;
        if(params[j]=="password" && params[i]=="password2" && f[params[i]].value!=f[params[j]].value)
         {
          alert(params[i] + " y " + params[j] + " no son iguales");
          f[params[i]].value="";
          f[params[j]].value="";
          f[params[j]].focus();
          return false;
         }
       }
     }
   } 
 }
function CursorCarga()
 {
  document.forms[0].elements[0].focus();
 } 
</script> 
</head> 
<body onLoad="CursorCarga()">
<form name="prueba" onsubmit="return Validar(this, 'nombre','4','password','4','password2','4','email','7')" > 
<input type="text" name="nombre" /> 
<input type="password" name="password" />
<input type="password" name="password2" />
<input type="text" name="email" /> 
<button type="submit">enviar formulario</button> 
</form> 
</body> 
</html>

;)

Edito:
Cuando los password's son diferentes el focus es en j, en el primero no en el i ;)

cccardenaso · #14 (**permalink**) 27/05/2008, 16:57

Hola!

Quisiera saber como realizar este mismo tipo de validación pero para una matriz que estoy generando, en codigo siguiendo la secuencia que llevan aqui, como ejemplo es algo como:

<html>
<head>
<script type="text/javascript">
function Validar()
{
params = Validar.arguments;
f = params[0];
vale = true;

for (var i = 1, total = params.length; i < total; i++)
{
alert(f[params[i]].value);
if (f[params[i]].value == "") alert("debe rellenar el campo: " + params[i]);
vale = (vale && f[params[i]].value != "");
}
return vale;
}
</script>
</head>
<body>
<form name="prueba" onsubmit="return Validar(this, 'pepe[redondo][]','PisYCaca[redondo][]')">
<?
for($i=0;$i<5;$i++)
{
?>
<input type="text" name="pepe[redondo][]" />
<input type="text" name="PisYCaca[redondo][]"/> <BR>
<?
}
?>
<button type="submit">enviar formulario</button>
</form>
<body >
</body>
</html>

A la función validar no le he realizado ningún cambio, ya los inputs no son pepe, ni PisyCaca, sino pepe[redondo][], PisYCaca[redondo][], es lo que me imagino, pero de ahí he ubicado el llamado de la funcion en varios lugares y no he logrado nada, SOS, jijiji, de antemano muchas gracias