validar campos

kitty14 · #1 (**permalink**) 08/09/2008, 08:37

Hola a todos:

Espero que alguien me pueda ayudar en mi problema. Tengo un formulario muy simple para enviar y antes de enviar estoy intentando validar los campos, hago lo siguiente:

*****************************
<title>Enviando Correos</title>
<script src="/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

function envio(){
new Ajax.Updater('apartado','correo.jsp',{
parameters: $('fPedido').serialize(true)});
}

function validar(fPedido){

var er_email = /^(.+\@.+\..+)$/
var er_telfono = /^[0-9]{9}$/

if (fPedido.sNombre.value.trim()=="") {
alert('Nombre no valido');
fPedido.sNombre.focus();
return (false);
}

if (fPedido.sTelefono.value=="") {
alert("El campo \"Tel�fono\" est� vac�o.");
fPedido.sTelefono.focus();
return (false);
}else{
if(!er_telfono.test(fPedido.sTelefono.value)){
alert('Campo Tel�fono no v�lido.');
fPedido.sTelefono.focus();
return (false) //no submit
}
}
if (fPedido.sEmail.value=="") {
alert("El campo \"E-mail\" est� vacio.");
fPedido.sEmail.focus();
return (false);
}else{
if(!er_email.test(fPedido.sEmail.value)){
alert('Campo E-mail no valido.')
fPedido.sEmail.focus();
return (false);
}
}

if (fPedido.sDireccion.value.trim()=="") {
alert('El campo \"Direccion\" est vacio');
fPedido.sDireccion.focus();
return (false);
}
if (fPedido.sCiudad.value.trim()=="") {
alert('El campo \"Ciudad\" est vacio');
fPedido.sCiudad.focus();
return (false);
}
if (fPedido.pProvincia.value.trim()=="") {
alert('El campo \"Provincia\" est vacio');
fPedido.pProvincia.focus();
return (false);
}
if (fPedido.nCp.value.trim()=="") {
alert('El campo \"Codigo Postal\" est vacio');
fPedido.nCp.focus();
return (false);
}
if (fPedido.datos.checked==false ){
alert('Para enviar tus datos tienes que haceptar las condiciones de proteccion de datos');
return(false);
}
if (fPedido.producto.checked==false ){
alert('Para realizar un pedido debe de seleccionar algun producto');
return(false);
}

}

String.prototype.trim= function() {//Agrega la funci�n trim al objeto String
return this.replace(/(^\s*)|(\s*$)/g,""); //elimina espacios a izquierda y derecha
}

function activarCantidad(Prod,Cantidad){

if (Prod.checked==true )
{
Cantidad.disabled=false ;
}
else
{
Cantidad.disabled=true;
Cantidad.value="";
}

}
</script>
</head>
<body>

<form id="fPedido" name="fPedido" class="formu" onSubmit="return validar(this)">
<label>*Nombre y apellidos <input class="ecBordeCaja" type="text" name="sNombre" size=30/></label><br><br>
<label>*Direccion <input class="ecBordeCaja" type="text" name="sDireccion" size=30/></label><br><br>
<label>*C.P. <input class="ecBordeCaja" type="text" name="nCp" size=5 maxlength=5/></label><br><br>
<label>*Ciudad <input class="ecBordeCaja" type="text" name="sCiudad"/></label><br><br>
<label>*Provincia <input class="ecBordeCaja" type="text" name="pProvincia"/></label><br><br>
<label>*Email <input class="ecBordeCaja" type="text" name="sEmail"/></label><br><br>
<label>*Telefono <input class="ecBordeCaja" type="text" name="sTelefono"/></label><br><br>
<label>Comentario sobre el pedido</label><br><textArea class="ecBordeCaja" name="sComentario" rows="5" cols="40"/></textarea><br><br>
<br>
<div class="ecRelleno"></div>
<div><input name="datos" value="3" type="checkbox"/> Proteccion de datos</div><br/><br/>
<div class="ecRelleno"></div>
<input type="button" name="enviar" value="Enviar" onClick="enviar()">
</form>

<div id="apartado" class="ecAaprtado"></div>

</body>
</html>
***********************************************

La cosa es que el formulario se envia pero sin validarse los campos, es decir, que a la funcion "enviar" que esta puesta en el onClick del boton hace caso, pero al del formulario no. Este mismo "validar" lo hago en otra pagian web y me va perfectamente. Alguien puede echarle un vistazo y decirme si encuentra algun fallo??

Muchas gracias de antemano.

ragodel · #2 (**permalink**) 08/09/2008, 16:24

bueno hacer las validaciones en un formulario...no es algo muy complicado, pero mirare tu codigo para ver entender que es lo que quieres hacer realmente

ragodel · #3 (**permalink**) 08/09/2008, 17:16

hice estos cambios:

<form id="fPedido" name="fPedido" class="formu" onSubmit="return validar(this)" action="correo.jsp">, agregue la parte que esta en verde

y en el boton enviar :
<input type="button" name="enviar" value="Enviar" onClick="enviar()">, quite la parte que esta en rojo..si no estoy mal la idea es enviar los datos y despues de la validacion todo esta OK. pues de esta forma pasas a la pagina de correo.jsp...claro que dejo por fuera una parte de ajax que tienes...que la verdad no comprendo que quieres hacer son ella...en fin espero sea lo que buscabas.

saludos.

jseros · #4 (**permalink**) 08/09/2008, 21:52

Hola kitty14. Lo que puedes hacer es lo siguiente, cambia el tipo del botón de button a submit. Es lo correcto, para eso se hicieron esos botones:

Código:

if( window.onload )
  var onlfunc = window.onload;
else
  var onlfunc = function(){};

window.onload = function(){
    onlfunc();
    document.getElementById( "fPedido" ).onsubmit = function(){
         return envio( this );
    };
};

function envio( form2send )
{
   //verifica primero si estan completos los campos y si no es así muestra la alerta
   if( validar( form2send )  )
  {
       new Ajax.Updater('apartado',  form2send.action  ,{
       parameters: $( form2send ).serialize(true)});
  }
  return false;
}

HTML

Código HTML:

<form id="fPedido" name="fPedido" class="formu" action="correo.jsp">

<input type="submit" name="enviar" value="Enviar">

Aunque deberias dar una opción a las personas que usan un navegador que no soportan javascript total a parcialmente creando una validación en el servidor...

Te explicaré el código:

Código:

if( window.onload )
  var onlfunc = window.onload;
else
  var onlfunc = function(){};

Verifico si se va a ejecutar algo con el evento onload, si es así lo guarda en la variable onlfunc como si fuera una función, pero si no almacena en esa misma variable una función vacía.

Código:

window.onload = function(){
    onlfunc();
    document.getElementById( "fPedido" ).onsubmit = function(){
         return envio( this );
    };
};

En el evento onload guardo una función que ejecute lo que esté almacenado en la variable onlfunc, que puede ser una función vacía o no y accedo al formulario programandole el evento onsubmit que devuelve el resultado de la función envio.

Código:

function envio( form2send )
{
   //verifica primero si estan completos los campos y si no es así muestra la alerta
   if( validar( form2send )  )
  {
       new Ajax.Updater('apartado',  form2send.action  ,{
       parameters: $( form2send ).serialize(true)});
  }
  return false;
}

En la función envio recibo como parametro el formulario y verifico su integridad con la función validar(simpre cancela el evento). como puedes ver accedo a el archivo mediante la propiedad action par que no sea algo invasivo.

Espero que el código no sea dificil de entender y que te funcione como esperas. Sino, igual aquí estamos para colaborarte...quedo pendiente y un saludo!!

kitty14 · #5 (**permalink**) 09/09/2008, 01:51

Gracias por contestar a todos. He puesto el submit y luego he quitado el onClick del botton y le he puesto en el action del formulario para que fuese a la otra página. El metodo de ajax lo que hace es ir a la otra pagina y deja el resultado en la del principio, esta muy bien Ajax.

Salu2!!!