Tema: Formulario por partes en PHP
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 05/07/2014, 12:47
andre___5025
 
Fecha de Ingreso: septiembre-2013
Ubicación: Bogota
Mensajes: 139
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: Formulario por partes en PHP
Hola amigos, Resulta que tengo un formulario demasiado extenso y decidí dividirlo en varios "bloques" por así decirlo para que no se viera tan recargado. Lo dividí en 5 bloques pero el problema es que solo me esta validando(que no estén vacíos) los campos del ultimo bloque y los de mas no los valida. Esto es raro por que antes de dividir el formulario me validaba todos los campos. Voy a mostrar el código que estoy construyendo con solo dos campos ya que es muy extenso. La validación la hago con Jquery.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
  3. <title></title>
  4. <head>
  5. <script src="javascript/paginacion.js" type="text/javascript"></script>
  6. <script src="validacion_jquery/jquery.js"></script>
  7. <script src="validacion_jquery/jquery.validate.js"></script>
  8. <LINK href='validacion_jquery/estilo_color.css' type=text/css rel=stylesheet>
  9. <script type="text/javascript">
  10.     $(function(){
  11.         $('#miForm3').validate({
  12.             errorClass: "my-error-class",
  13.             validClass: "my-valid-class",
  14.             rules :{
  15.                 cod_doc : {
  16.                     required :true,
  17.                 },
  18.                 numdoc_cab : {
  19.                     required : true,
  20.                     number : true   //para validar campo solo numeros
  21.                 }
  22.             }//cierra rules
  23.         });    
  24.     });
  25. </script> 
  26. </head>
  27. <body>
  28.   <FORM id="miForm3" NAME="registrar_cab_hogar" METHOD="post">
  29.     <!-- Inicio primer bloque -->
  30. <div align="left" id="divcero" style="display: block;" >  
  31. <td> * Tipo de documento:
  32.                 <select class="required" name='cod_doc'>
  33.                 <option value="">Seleccione...</option>
  34.                 <?
  35.                 $sql3 = "select * from tipo_doc";
  36.                 $result3 = mysql_query ($sql3, $link);
  37.                 while ($row = mysql_fetch_array ($result3)) {
  38.                 $mcodpr = $row['cod_doc'];
  39.                 $mprog = $row['dtalle_doc'];
  40.                 if ($pro == $mcodas)
  41.                 echo "<option value= '$mcodpr'> $mprog </option>";
  42.                 else
  43.                 echo "<option value= '$mcodpr'> $mprog</option>";
  44.                 }
  45.                 echo "</option>";
  46.                 ?>
  47.                 </select>
  48.                 </td>
  49. </td><td>* N&uacute;mero de documento:<input class="required" type=text name="numdoc_cab" id="numdoc_cab" onKeyPress="cargando(this)" onBlur="comprobarU(this)" MAXLENGTH=20 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"></input>
  50. <center><input type="button" name="sgte_pag1" value="Siguiente" class="button white" id="botoninicio" onClick="ocultar();"></center>
  51. </div>
  52. <!-- Fin primer bloque -->
  53.  
  54. <!-- Inicio segundo bloque -->
  55. <div align="left" id="divprimero" style="display: none;" >
  56. campos...
  57.         </div>
  58.         <!-- Fin del segundo bloque -->
  59.  
  60. <!-- Inicio del tercer bloque -->
  61. <div align="left" id="divsegundo" style="display:none;">     
  62. campos...
  63. </div>
  64. <!-- Fin del tercer bloque -->
  65.  
  66. <!-- Inicio del cuarto bloque -->
  67. <div align="left" id="divtercero" style="display:none;">
  68. campos...
  69. </div>
  70. <!-- Fin del cuarto bloque -->
  71.  
  72. <!-- Inicio del quinto bloque-->
  73. <div align="left" id="divcuarto" style="display:none;">
  74. campos...
  75.     <input type="button" value="Anterior" class="button white"onClick="atras3();">
  76.     <input type="button" value="Volver al principio" class="button white" onClick="ocultarcero();">    
  77.     <input name="enviar" type="submit" class="button white" value="Guardar formulario">
  78. </div>
  79. <!--Fin del quinto bloque-->
  80. </FORM>
  81. </body>
  82. </html>

paginacion.js

Código Javascript: 
Ver original
  1. function ocultarcero(){
  2.     document.getElementById('divcero').style.display='block';
  3.     document.getElementById('divprimero').style.display='none';
  4.     document.getElementById('divtercero').style.display='none';
  5.     document.getElementById('divcuarto').style.display='none';
  6.     document.getElementById('divsegundo').style.display='none';
  7. }   
  8.     function ocultar(){
  9.     document.getElementById('divcero').style.display='none';
  10.     document.getElementById('divprimero').style.display='block';
  11.     document.getElementById('divtercero').style.display='none';
  12.     document.getElementById('divcuarto').style.display='none';
  13.     document.getElementById('divsegundo').style.display='none';
  14. }
  15. function atras1(){
  16.     document.getElementById('divcero').style.display='none';
  17.     document.getElementById('divprimero').style.display='block';
  18.     document.getElementById('divsegundo').style.display='none';
  19.     document.getElementById('divtercero').style.display='none';
  20.     document.getElementById('divcuarto').style.display='none';
  21. }
  22.  
  23. function ocultar2(){
  24.     document.getElementById('divcero').style.display='none';
  25.     document.getElementById('divprimero').style.display='none';
  26.     document.getElementById('divsegundo').style.display='block';
  27.     document.getElementById('divtercero').style.display='none';
  28.     document.getElementById('divcuarto').style.display='none';
  29.     
  30. }
  31.  
  32. function atras2(){
  33.     document.getElementById('divcero').style.display='none';
  34.     document.getElementById('divprimero').style.display='none';
  35.     document.getElementById('divsegundo').style.display='block';
  36.     document.getElementById('divtercero').style.display='none';
  37.     document.getElementById('divcuarto').style.display='none';
  38.     
  39. }
  40.  
  41. function ocultar3(){
  42.     document.getElementById('divcero').style.display='none';
  43.     document.getElementById('divprimero').style.display='none';
  44.     document.getElementById('divsegundo').style.display='none';
  45.     document.getElementById('divtercero').style.display='block';
  46.     document.getElementById('divcuarto').style.display='none';
  47.     
  48. }
  49. function atras3(){
  50.     document.getElementById('divcero').style.display='none';
  51.     document.getElementById('divprimero').style.display='none';
  52.     document.getElementById('divsegundo').style.display='none';
  53.     document.getElementById('divtercero').style.display='block';
  54.     document.getElementById('divcuarto').style.display='none';
  55. }
  56. function ocultar5(){
  57.     document.getElementById('divcero').style.display='none';
  58.     document.getElementById('divprimero').style.display='none';
  59.     document.getElementById('divsegundo').style.display='none';
  60.     document.getElementById('divtercero').style.display='none';
  61.     document.getElementById('divcuarto').style.display='block';
  62.     
  63. }