Foros del Web » Programando para Internet » Javascript »

formulario validacion

Estas en el tema de formulario validacion en el foro de Javascript en Foros del Web. Hola tengo un problema con el procesamiento de un formulario este es mi codigo de la pagina del foprmulario: incluyo en el head esto: Código ...
  #1 (permalink)  
Antiguo 24/01/2013, 16:03
 
Fecha de Ingreso: enero-2013
Mensajes: 57
Antigüedad: 11 años, 3 meses
Puntos: 1
formulario validacion

Hola tengo un problema con el procesamiento de un formulario este es mi codigo de la pagina del foprmulario:
incluyo en el head esto:

Código PHP:
<script language="javascript" src="validar.js"></script> 
y en el body:
Código PHP:
        <form action="handleForm.php" method="post" onsubmit="return validar(this)">
        <table class="tablamostrar">

            <input type="hidden" name="ID_PROYECTO" value = "<?php echo null?>" >
            <input type="hidden" name="COLOR" value = "<?php echo null?>">
            
            <tr><th rowspan=3 >Estado del proyecto</th>
            <td bgcolor="#ccffff"><input type="radio" name="COLOR" value="1" >En Lima</td>   <td bgcolor="#bde6e1"><input type="radio" name="COLOR" value="4" >En fabricaci&oacuten</td></tr>
            <tr><td bgcolor="#cc99ff"><input type="radio" name="COLOR" value="2">En aduanas</td><td bgcolor="#33cccc"><input type="radio" name="COLOR" value="5" >Contrato firmado, aun no en f&aacutebrica</td></th></tr>
            <tr><td bgcolor="#e1c7e1"><input type="radio" name="COLOR" value="3">En camino</td> <td bgcolor="#ff0000"><input type="radio" name="COLOR" value="6" >Por firmar contrato o Faltan planos de instalaci&oacuten</td></tr>
            
            <tr><th>Codigo de Proyecto</th><td colspan=2><input type="text" size="80" name="ID_PROYECTO" id="input1" value="<?php echo null?>"></td><td><p id="error1" style="visibility:hidden">Falta ingresar datos</p></td></tr>
            <tr><th>Proyecto</th><td colspan=2><input type="text" size="80" name="PROYECTO" id="input2" value="<?php echo null?>"></td><td id="error2" style="visibility:hidden">Falta ingresar datos</td></tr>
            <tr><th>Cliente</th><td colspan=2><input type="text" size="80" name="CLIENTE" id="input3" value="<?php echo null?>"></td><td id="error3" style="visibility:hidden">Falta ingresar datos</td></tr>
    


            <tr><td colspan = 2> 
            <input type="submit" name="action" value="Ok"></input>
            <input type="submit" name="action" value="Cancel"></input> 
            </td></tr>
        
        </table>
        
        </form>
y el codigo javascript es (validar.js) es:

Código PHP:
function validar(frm){

    var 
resultado1 frm.ID_PROYECTO.value.length 0;
    var 
resultado2 frm.PROYECTO.value.length 0;
    var 
resultado3 frm.CLIENTE.value.length 0;

  
  
document.getElementById('error1').style.visibility = (resultado1) ? 'hidden':'visible';
  
document.getElementById('input1').style.borderColor = (resultado1) ? 'black':'red';
  
document.getElementById('input1').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';
  
  
document.getElementById('error3').style.visibility = (resultado3) ? 'hidden':'visible';
  
document.getElementById('input3').style.borderColor = (resultado3) ? 'black':'red';
  
document.getElementById('input3').style.color = (resultado3) ? 'black':'red';
  

    
  return (
resultado1 && resultado2 && resultado3);

nose porque no me corre, en realidad quiero hacerlo para 18 campos, pero solo puse 3 pero no me compila, alguien que me pueda ayudar a resolver esto?
  #2 (permalink)  
Antiguo 24/01/2013, 16:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: formulario validacion

Hola:

Te has fijado en el código fuente... los "echo null" de php no me gustan ... y en un campo hidden...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 24/01/2013, 16:34
 
Fecha de Ingreso: enero-2013
Mensajes: 57
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: formulario validacion

Hola, bueno ya elimine los echo null, estaban de mas, y el campo hidden tambien, pero sigue pasandose de frente a handleForm.php cuando dejo los campos vacios, otra observacion, al final tengo algo asi:

Código PHP:
Ver original
  1. <tr><td colspan = 2>
  2.             <input type="submit" name="action" value="Ok"></input>
  3.             <input type="submit" name="action" value="Cancel"></input>
  4.             </td></tr>
  #4 (permalink)  
Antiguo 24/01/2013, 17:29
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: formulario validacion

Cita:
Iniciado por info0506 Ver Mensaje
Hola, bueno ya elimine los echo null, estaban de mas, y el campo hidden tambien, pero sigue pasandose de frente a handleForm.php cuando dejo los campos vacios, otra observacion, al final tengo algo asi:

Código PHP:
Ver original
  1. <tr><td colspan = 2>
  2.             <input type="submit" name="action" value="Ok"></input>
  3.             <input type="submit" name="action" value="Cancel"></input>
  4.             </td></tr>
Lo estás haciendo mal, y complicado.
Primero te planteo una duda, no me queda muy claro si queres validar que cualquiera de esos tres campos no deba de estar vacío ó solo uno de ellos, bueno, al margen, to lo hago para los tres
Esto se ha explicado reiteradamente, lee estos posts
http://www.forosdelweb.com/f13/que-h...5/#post4352048
http://www.forosdelweb.com/f13/que-h...5/#post4353569
sobre todo en lo referente al uso del onsubmit para validar

Ahora sobre tu código, y en función de las lecturas que te recomendé
Código Javascript:
Ver original
  1. if (!resultado1 || !resultado2 || !resultado3){
  2.     alert('llenar los campos...')
  3.   return false;
  4.   }
insisto, a falta de más datos, hice que los tres sean obligatorios
Asi y todo con esa corrección tampoco te va a funcionar por lo siguiente:
tu form tiene dos campos con
name="ID_PROYECTO" con lo cual tu variable
var resultado1 = frm.ID_PROYECTO.value.length > 0;
va a arrojar un "undefined", deberías cambiar el name de
<input type="hidden" name="ID_PROYECTO" value = "" >
y de paso quitemos eso de null, como señaló @caricatos.
Y porque lo de que te estás complicando?

Ya que definistes id para los inputs en cuestion, es más, tu función usa para los errores getElementById, usa lo mismo para las tres primeras variables, al tener que ser los id únicos, simplificas el proceso de identificación de los campos.
En concreto esto funciona

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <script type="text/javascript">
  8. //<![CDATA[
  9. function validar(frm){
  10.  
  11. var resultado1 = frm.ID_PROYECTO.value.length > 0;
  12.    var resultado2 = frm.PROYECTO.value.length > 0;
  13.    var resultado3 = frm.CLIENTE.value.length > 0;
  14.  
  15.  
  16.  document.getElementById('error1').style.visibility = (resultado1) ? 'hidden':'visible';
  17.   document.getElementById('input1').style.borderColor = (resultado1) ? 'black':'red';
  18.   document.getElementById('input1').style.color = (resultado1) ? 'black':'red';
  19.  
  20.  document.getElementById('error2').style.visibility = (resultado2) ? 'hidden':'visible';
  21.   document.getElementById('input2').style.borderColor = (resultado2) ? 'black':'red';
  22.   document.getElementById('input2').style.color = (resultado2) ? 'black':'red';
  23.    
  24.  document.getElementById('error3').style.visibility = (resultado3) ? 'hidden':'visible';
  25.   document.getElementById('input3').style.borderColor = (resultado3) ? 'black':'red';
  26.   document.getElementById('input3').style.color = (resultado3) ? 'black':'red';
  27.    
  28.  
  29.    
  30.  if (!resultado1 || !resultado2 || !resultado3){
  31.     alert('llenar los campos...')
  32.  return false;
  33.  }
  34. }
  35. //]]>
  36. </head>
  37.       <form action="handleForm.php" method="post" onsubmit="return validar(this)">
  38.          <table class="tablamostrar">
  39.  
  40.             <!-- input type="hidden" name="ID_PROYECTO" value = "" -->
  41.              <input type="hidden" name="COLOR" value = "">
  42.              
  43.             <tr><th rowspan=3 >Estado del proyecto</th>
  44.             <td bgcolor="#ccffff"><input type="radio" name="COLOR" value="1" >En Lima</td>   <td bgcolor="#bde6e1"><input type="radio" name="COLOR" value="4" >En fabricaci&oacuten</td></tr>
  45.             <tr><td bgcolor="#cc99ff"><input type="radio" name="COLOR" value="2">En aduanas</td><td bgcolor="#33cccc"><input type="radio" name="COLOR" value="5" >Contrato firmado, aun no en f&aacutebrica</td></th></tr>
  46.             <tr><td bgcolor="#e1c7e1"><input type="radio" name="COLOR" value="3">En camino</td> <td bgcolor="#ff0000"><input type="radio" name="COLOR" value="6" >Por firmar contrato o Faltan planos de instalaci&oacuten</td></tr>
  47.              
  48.            <tr><th>Codigo de Proyecto</th><td colspan=2><input type="text" size="80" name="ID_PROYECTO" id="input1" value=""></td><td><p id="error1" style="visibility:hidden">Falta ingresar datos</p></td></tr>
  49.             <tr><th>Proyecto</th><td colspan=2><input type="text" size="80" name="PROYECTO" id="input2" value=""></td><td id="error2" style="visibility:hidden">Falta ingresar datos</td></tr>
  50.             <tr><th>Cliente</th><td colspan=2><input type="text" size="80" name="CLIENTE" id="input3" value=""></td><td id="error3" style="visibility:hidden">Falta ingresar datos</td></tr>
  51.      
  52.  
  53.  
  54.            <tr><td colspan = 2>  
  55.            <input type="submit" name="action" value="Ok"></input>
  56.            <input type="submit" name="action" value="Cancel"></input>  
  57.            </td></tr>
  58.        
  59.        </table>
  60.        
  61.        </form>
  62. </body>
  63. </html>


SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 25/01/2013, 10:21
 
Fecha de Ingreso: enero-2013
Mensajes: 57
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: formulario validacion

Hola, gracias por la informacion ya esta saliendo este problema, en javascript soy novato, bueno tengo otro problema, sucede que tengo dos botones submit uno para procesor OK y otro para CANCELAR, pero si presiono cancelar no sale al index, sino me aparece como si estuviera persionando OK, o sea los alerts del javascript.
  #6 (permalink)  
Antiguo 25/01/2013, 10:24
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: formulario validacion

Cita:
Iniciado por info0506 Ver Mensaje
Hola, gracias por la informacion ya esta saliendo este problema, en javascript soy novato, bueno tengo otro problema, sucede que tengo dos botones submit uno para procesor OK y otro para CANCELAR, pero si presiono cancelar no sale al index, sino me aparece como si estuviera persionando OK, o sea los alerts del javascript.
Tu problema es que confundes cosas de html submit solo es para enviar formularios, si quieres llevar al usuario a otra pagina usa un link

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #7 (permalink)  
Antiguo 25/01/2013, 10:30
 
Fecha de Ingreso: enero-2013
Mensajes: 57
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: formulario validacion

Hola, gracias por la aclaracion, lo que sucede es que mi procesa.php, tambien tiene un metodo que ve si has presionado cancel, entonces no procesa nada y te regresa al index
lo solucione reemplazando ese submit con nombre Cancel por este button:
Código PHP:
Ver original
  1. <input type="button" value="Cancel" onclick="window.location.href='index.php'" /></input>
  #8 (permalink)  
Antiguo 25/01/2013, 10:32
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 12 años, 7 meses
Puntos: 397
Respuesta: formulario validacion

Creo que esto

<input type="submit" name="action" value="Cancel"></input>

Es diferente a esto

<input type="button" value="Cancel" onclick="window.location.href='index.php'" /></input>

No?
Ademas la etiqueta input no tiene etiqueta de cerrada </input>

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Etiquetas: campos, formulario, input, js, php, validacion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:40.