Validacion de caja de texto...envio no vacios

hoberwilly · #1 (**permalink**) 03/04/2009, 09:45

Hola amigos, buen dia ...tengo el siguiente formulario pero me gustaria implementarlo que las cajas de textos (3) no permita que se envien campos vacios. Dejo el codigo que estoy usando:

Código php:

Ver original<!-- <script type="text/javascript">
<!--
function validaNum(e){ 
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true; //Tecla de retroceso (para poder borrar) 
    patron = /\d/; // Solo acepta números 
    te = String.fromCharCode(tecla); 
    return patron.test(te);  
}
function validaLet(e){ 
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true;
    patron =/[A-Za-z]/; // Solo acepta letras 
    te = String.fromCharCode(tecla); 
    return patron.test(te);  
}
function validaNumLet(e){ 
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true;
    patron = /\w/; // Acepta números y letras 
    te = String.fromCharCode(tecla); 
    return patron.test(te);  
} 
function comprueba(){
    if(confirm('¿Desea imprimir el pedido?'))
    print();
    if (confirm('¿Esta seguro de confirmar su pedido?'))
    return true;
    return false;
}
-->
</script><body><table>
<form name="form" id="form" action="index.php?p=8" method="post" onsubmit="return comprueba();">
<tr>
    <td height="30" colspan=2>Datos del Destinatario</td>
</tr>
<tr>
    <td>Apellidos y Nombres: </td>
    <td><input type="text" name="destinatario" onKeypress="return validaLet(event)">&nbsp<font color="red">(*)</td>
</tr>
<tr>
    <td>Direccion: </td>
    <td><input type="text" name="direccion" onKeypress="return validaNumLet(event)">&nbsp<font color="red">(*)</td>
</tr>
<tr>
    <td>Telefono: </td>
    <td><input type="text" name="telefono" onKeypress="return validaNum(event)">&nbsp<font color="red">(*)</td>
</tr>
<tr>
     <td colspan=2><input type="submit" name="enviar" value="Confirmar"></td>
</tr> -->

Agradesco de antemano por las sugerencias brindadas.

David · #2 (**permalink**) 03/04/2009, 09:55

En el evento onsubmit puedes comprobar:

Código javascript:

Ver originalif (campo.value == "") {
    // Campo Vacío
    return false;
}

FMB89 · #3 (**permalink**) 03/04/2009, 10:11

Arriba de todo de la funcion comprueba podes agregar los mensajes, en caso de que los campos esten vacios...

Código PHP:

  function comprueba() {
    if (!document.form.destinatario.value) alert("Ingrese Apelidos y Nombres");
    if (!document.form.direccion.value) alert("Ingrese Direccion");
    if (!document.form.telefono.value) alert("Ingrese Telefono");
    
    ...
}

De todas formas te va a enviar el formulario, por eso es mejor que hagas un input=button en vez de type=submit, que primero haga el chequeo, y si no hay alertas que envie el formulario.

hoberwilly · #4 (**permalink**) 03/04/2009, 10:20

Gracias por sus respuestas amigos, esto es lo que avanze...(parte de la funcion comprueba)

Código php:

Ver original<!-- function comprueba(){
    if(document.form.destinatario.value==""){
        alert("Ingrese Apelidos y Nombres");
        return false;
    }else{
        if(confirm('¿Desea imprimir el pedido?'))
            print();
        if(confirm('¿Esta seguro de confirmar su pedido?'))
            return true;
            return false;
    }
} -->

pero como k no me queda claro en el siguiente tema como variarlo si en mi tabla tengo 5 cajas de texto para validar, como seria la implementacion...gracias otra vez.

hoberwilly · #5 (**permalink**) 03/04/2009, 12:55

A ver amigos, busque por google y esto pude adaptarlo a mis necesidades...pero me falta un detalle que al dar click en el submit me corre las dos funciones: VALIDAR y COMPRUEBA, y esto esta errado porque al "Encontrar un campo de texto vacio" no debe permitir CONFIRMAR (Esto esta en la funcion Comprueba)

Dejo parte del codigo modificado:

Código php:

Ver original<!-- function validar(){
    if(document.form.destinatario.value==""){
        alert("Ingrese Apelidos y Nombres");
        form.destinatario.focus();
        return;
    }
    if(document.form.direccion.value==""){
        alert("Ingrese Direccion");
        form.direccion.focus();
        return;
    }
    if(document.form.tel1.value==""){
        alert("Ingrese Direccion");
        form.tel1.focus();
        return;
    }
}
function comprueba(){
    if(confirm('¿Desea imprimir el pedido?'))
        print();
    if(confirm('¿Esta seguro de confirmar su pedido?'))
        return true;
        return false;
}
-->
</script>  -->

Código php:

Ver original<!-- <form name="form" id="form" action="index.php?p=8" method="post" onsubmit="return validar() && comprueba();"> -->

Gracias por la ayuda que me puedan brindar.

David · #6 (**permalink**) 03/04/2009, 13:23

Podría ser:

Código html:

Ver originalonsubmit="if (validar()) { return comprueba(); }; return false"

Aunque, claro, por la legibilidad es mejor una función aparte.

hoberwilly · #7 (**permalink**) 03/04/2009, 13:50

Hay algo raro aqui, la funcion validar esta oka pero no la funcion comprueba...esto es lo modificado:

Código php:

Ver original<!-- <form name="form" id="form" action="index.php?p=8" method="post" onsubmit="if(validar()){return comprueba();}; return false"> -->

Saludos,

hoberwilly · #8 (**permalink**) 03/04/2009, 15:35

Porque no funciona esto?

Código php:

Ver original<!-- <form name="form" id="form" action="index.php?p=8" method="post" onsubmit="if(validar()){
return comprueba();
}
return false;
">
 -->

David · #9 (**permalink**) 03/04/2009, 15:40

. Mejor haz una nueva función y ganas en legibilidad:

Código javascript:

Ver originalfunction enviar() {
    if (validar()) {
         return comprueba();
    }
    return false;
}

Y en el onsubmit llamas a la función: "return enviar()"

hoberwilly · #10 (**permalink**) 03/04/2009, 16:07

Algo anda mal David,
Esto realize:
1. se añadio esta funcion en js:

Código php:

Ver original<!-- function enviar(){
    if(validar()){
        return comprueba();
    }
    return false;
}
 -->

2. se modifico el onsubmit segun lo sugerido:

Código php:

Ver original<!-- <form name="form" id="form" action="index.php?p=8" method="post" onsubmit="return enviar()"> -->

3. No valida ninguna de las funciones y directamente se va a la otra pagina php???

Saludos,

David · #11 (**permalink**) 03/04/2009, 16:52

Revisa la consola de errores de tu navegador para ver qué está provocando el error.

hoberwilly · #12 (**permalink**) 06/04/2009, 08:02

Buen dia, a la sugerencia dada por David el problema no es que este dando error...sino que al dar click en el submit directamente me manda a la otra pagina de facturacion (SIN VALIDAR, como son las funciones de validar y comprueba).

Saludos,

hoberwilly · #13 (**permalink**) 07/04/2009, 09:08

Buen día,
No entiendo que esta pasando con esto, modifik el action del formulario para k no apunte a otra pagina, y se quede en la misma...

Código php:

Ver original<!-- <form name="form" id="form" action=" " method="post" onsubmit="return enviar()"> -->

pero no me muestra ningun error???

ojo k la funcion enviar es de la sgte manera segun lo sugerido por David:

Código php:

Ver original<!-- function enviar(){
    if(validar()){
        return comprueba();
    }
    return false;
} -->

Gracias de antemano por la ayuda prestada

David · #14 (**permalink**) 07/04/2009, 09:17

Habría que ver el HTML completo, porque debería funcionar. Si puedes darnos un enlace a tu página podemos mirarla.

P.S.: ¿Por qué siempre comentas los códigos?

hoberwilly · #15 (**permalink**) 07/04/2009, 09:29

Bien aqui va...tresw(punto)tiendasnando(punto)com

Gracias

David · #16 (**permalink**) 07/04/2009, 09:38

¿Dónde está el formulario?

hoberwilly · #17 (**permalink**) 07/04/2009, 09:43

A esto te refieres:
1. click en categoria Ellas
2. llevar al menos un producto al carrito
3. link : ver carrito (en la cabecera)
4. click boton continuar
5. llegas a Confirmacion de Envio
6. click en Confirmar (aqui esta)

David · #18 (**permalink**) 07/04/2009, 09:51

El problema es que tu botón submit también se llama enviar. Cambia el nombre del campo, o cambia el nombre de la función, o llama a la función con window.enviar()

hoberwilly · #19 (**permalink**) 07/04/2009, 10:08

Efectivamente David, en algun momento recuerdo nos paso algo similar con esto de los nombres...pero ya no pues la primera se acepta la segunda se pide disculpas pero la tercera ya no ya...

Bueno al realizar las pruebas la funcion de validacion de campos vacios funciona perfectamente, pero ahora me falta que funcione la funcion de confirmacion.

p.d. la k modifique es el nombre del submit...name="Confirmar" y una pequeña modificacion en la funcion "envia":

Código php:

Ver originalfunction envia(){
    if(validaVacio()){
        return confirma();
    }
    return false;
}

pero la idea sigue siendo la misma.

Saludos,

David · #20 (**permalink**) 07/04/2009, 10:16

Haz un return true al final de la funcion validaVacio()

hoberwilly · #21 (**permalink**) 07/04/2009, 12:06

David realize las modificaciones,
quedando asi la funcion:

Código php:

Ver originalfunction validaVacio(){
    if(document.form.destinatario.value==""){
        alert("Ingrese Apelidos y Nombres");
        form.destinatario.focus();
        //return true;
    }
    if(document.form.direccion.value==""){
        alert("Ingrese Direccion");
        form.direccion.focus();
    }
    return true;
}

Pero como k no cuadra aun la validacion de confirmacion, puesto k inmediatamente de aceptar el mensaje de validaVacio (para cualquiera de los 4 campos que esten vacios ) me emite el mensaje de confirmacion.

Gracias,

David · #22 (**permalink**) 07/04/2009, 12:16

No era necesario quitar los return; que tenías antes (de preferencia, return false; cuando la validación falla)

hoberwilly · #23 (**permalink**) 07/04/2009, 12:24

Hola amigo, esto modifique:

Código php:

Ver originalfunction validaVacio(){
    if(document.form.destinatario.value==""){
        alert("Ingrese Apelidos y Nombres");
        form.destinatario.focus();
        return false;
    }
    if(document.form.direccion.value==""){
        alert("Ingrese Direccion");
        form.direccion.focus();
        return false;
    }
    return true;
}

pero sigue en lo mismo???

David · #24 (**permalink**) 07/04/2009, 12:38

Yo lo probé y funciona

. ¿Qué es lo que no funciona exactamente?

hoberwilly · #25 (**permalink**) 08/04/2009, 07:35

Hola amigo, que raro

para cuando lo probe fuera de casa no funcionaba

pero ahora k estoy probando otra vez el codigo esta de la mil maravillas.

Gracias otra vez amigo David,

hoberwilly · #26 (**permalink**) 13/04/2009, 10:48

Hola David, todo iba bien hasta que por implementacion, se requirio la sgte modificacion de implementar un script k movilizara con enter en las cajas de texto (Tabulaciones con: onKeypress="return tabular(event,this)").
Por tanto queda de la sgte manera:

Código php:

Ver original<table>
<form name="form" id="form" action="index.php?p=8" method="post" onsubmit="return envia()">
<tr bgcolor="#48A4FF" align="left" class="tit">
    <td height="30" colspan=2>Datos del Destinatario</td>
</tr>
<tr>
    <td width="35%">Apellidos y Nombres: </td>
    <td width="65%" align="right"><input type="text" size="55" maxlength="50" name="destinatario" class="input_text" onKeypress="tabular(event,this)">&nbsp<font color="red">(*)</td>
</tr>
<tr>
    <td width="35%">Direcci&oacute;n de envio:</td>
    <td width="65%" align="right"><input type="text" size="55" maxlength="50" name="direccion" onKeypress="return tabular(event,this)" class="input_text">&nbsp<font color="red">(*)</td>
</tr>
<tr>
    <td width="35%">Referencia:</td>
    <td width="65%" align="right"><input type="text" size="55" maxlength="50" name="referencia" onKeypress="return tabular(event,this)" class="input_text">&nbsp<font color="red">(*)</td>
</tr>
<tr align="center" valign="middle">
     <td width="35%"></td>
     <td width="15%"><input type="button" value="Anterior" onclick="history.go(-1)"></td>
     <td width="15%"><input type="submit" name="Confirmar" value="Confirmar"></td>
     <td width="35%"></td>
</tr>
</table>
</form>

Pero al momento de dar enter en las cajas de texto, se movilizan oka pero cuando encuentra una vacia envia alerta de validacion de vacio (x ejm validaLet)...quisiera que esto sea modificado: que deje tabular por las cajas de texto (sin validaciones de vacio), pero cuando el usuario de click en submit "Confirmar" aqui recien ALERTA (validaciones de vacio)

Gracias de antemano,

hoberwilly · #27 (**permalink**) 13/04/2009, 11:19

Mil disculpas, el error del codigo es en la modificaciones de los eventos onkeypress (onKeypress="tabular(event,this);validaLet(event)" ). //lineas 8,12 y 16.
el js externo quedo asi:

Código php:

Ver originalfunction validaNum(e){ 
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true; //Tecla de retroceso (para poder borrar) 
    patron = /\d/; // Solo acepta números 
    te = String.fromCharCode(tecla); 
    return patron.test(te);  
}
function validaLet(e){ 
    tecla = (document.all) ? e.keyCode : e.which; 
    if (tecla==8) return true;
    patron =/[A-Za-z&#241;Ñ\s]/; // Solo acepta letras, ñ y Ñ, y barra espaciadora
    te = String.fromCharCode(tecla); 
    return patron.test(te);  
}
function validaVacio(){
    if(document.form.destinatario.value==""){
        alert("Ingrese Apelidos y Nombres");
        form.destinatario.focus();
        return false;
    }
    if(document.form.direccion.value==""){
        alert("Ingrese Direccion");
        form.direccion.focus();
        return false;
    }
    return true;
}
function confirma(){
    if(confirm('¿Desea imprimir el pedido?'))
        print();
    if(confirm('¿Esta seguro de confirmar su pedido?'))
        return true;
        return false;
}
function envia(){
    if(validaVacio()){
        return confirma();
    }
    return false;
}

Saludos,

David · #28 (**permalink**) 13/04/2009, 11:25

Modifica la función validaLet para que en lugar de tener en cuenta la tecla pulsada tome el valor del input a validar, también la expresión regular la modificas por algo como:
/^[a-zñ\s]+$/i

hoberwilly · #29 (**permalink**) 13/04/2009, 12:18

Hola David,
disculpa pero a las sugerencias no tengo idea como modificar la funcion,
////tecla = (document.all) ? e.keyCode : e.which;////
y el patron seria = patron = /^[a-zñ\s]+$/i;

Saludos,

David · #30 (**permalink**) 13/04/2009, 12:30

Sólo tienes que poner:

Código javascript:

Ver originalpatron = /^[a-zñ\s]+$/i;
return patron.test(valor_que_quieres_validar);