Ver Mensaje Individual
  #18 (permalink)  
Antiguo 03/06/2010, 14:17
Avatar de Adler
Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años
Puntos: 126
Respuesta: Validar formulario

Hola

Tenía un montón de errores (le habías puesto acento a los nombres de algunos campos, has creado nuevos tipos de campos ¿ num ?, los campos no tenían values,etc...)
Y después de mas de 20 minutos batallando, aquí lo tienes. Espero que te pares y veas las diferencias entre lo que tu hacías y como está ahora, para que así la próxima vez ......

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function valida_envia(frm){
  5. var nombre = frm.nombre.value;
  6. var apellido1 = frm.apellido1.value;
  7. var apellido2 = frm.apellido2.value;
  8. var patronOKnomb = /^([A-Za-zñÑ]{3,20})$/; // Acepta letras
  9. if ((!patronOKnomb.test(nombre)) || (!patronOKnomb.test(apellido1)) || (!patronOKnomb.test(apellido2))) {
  10.         alert("Tiene que escribir su nombre y dos apellidos");
  11.         return (false);
  12. }
  13.  
  14.  
  15. var ano = frm.ano.value;
  16. var patronOKano = /^(\d{4})$/; // Acepta números
  17. if (!patronOKano.test(ano))  {
  18.                       alert("Ha de rellena del campo año");
  19.                       return (false);
  20.          }
  21.  
  22.  
  23. if ((ano<= '1910') || (ano >= '1992'))  {
  24.         alert("Eres muy mayor o muy joven para esto");
  25.         return (false);
  26.          }
  27.  
  28.  
  29. var nif = frm.nif.value;
  30. var patronOKnif = /^(\d{1,8}[A-Z])$/;
  31.  
  32. if (!patronOKnif.test(nif)) {
  33.                          alert('Dni erroneo');
  34.         return (false);
  35.          }
  36.  
  37.  
  38. var number = nif.substr(0,nif.length-1); // número nif
  39. var letra = nif.substr(nif.length-1,1); // letra nif
  40. var comprobacion = (number &#37; 23);
  41. var arr_letras = new Array('T','R','W','A','G','M','Y','F','P','D','X','B','N','J','Z','S','Q','V','H','L','C','K','E','T');
  42. var letra_array = arr_letras[comprobacion];
  43. if (letra != letra_array) {
  44.         alert("La letra no corresponde al número dado");
  45.         return (false);
  46. }
  47.  
  48.  
  49. var direccion = frm.direccion.value;
  50. var numero = frm.numero.value;
  51. var patronOKdir = /^([A-Za-z0-9ñÑ]{3,50})$/; // Acepta letras y números
  52. var patronOKnum = /^(\d{1,4})$/; // Acepta números
  53. if ((!patronOKdir.test(direccion)) || (!patronOKnum.test(numero))) {
  54.                           alert("Por favor rellene dirección y numero");
  55.         return (false);
  56.          }
  57.  
  58.  
  59. var cpostal = frm.cpostal.value;
  60. var patronOKcpostal = /^(\d{5})$/; // Acepta números
  61. if (!patronOKcpostal.test(cpostal))  {
  62.         alert("El c.Postal debe de ser de 5 dígitos");
  63.         return (false);
  64.          }
  65.  
  66.  
  67.  
  68. var poblacion = frm.poblacion.value;
  69. var patronOKpob = /^([A-Za-zñÑ]{3,25})$/; // Acepta letras
  70. if (!patronOKpob.test(poblacion))  {
  71.         alert("Debes de rellenar el campo población");
  72.         return (false);
  73.          }
  74.  
  75.  
  76. var email = frm.email.value;
  77. var patronOKmail = /^([0-9a-zA-Z]+(?:[._][0-9a-zA-Z]+)*)@([0-9a-zA-Z]+(?:[._-][0-9a-zA-Z]+)*\.[0-9a-zA-Z]{2,3})$/;
  78. if (!patronOKmail.test(email)) {
  79.         alert("Debes de rellenar bien el campo Email");
  80.                          return (false);
  81.            }
  82.  
  83.  
  84. var telefono = frm.telefono.value;
  85. var patronOKfone = /^(\d{9})$/; // Acepta números
  86. if (!patronOKfone.test(telefono))  {
  87.         alert("Introduce un teléfono correcto(9 dígitos)");
  88.         return (false);
  89.          }
  90.  
  91.  
  92. var password = frm.password.value;
  93. var patronOKpass = /^([A-Za-z0-9]{4,8})$/; // Acepta letras y números
  94. if (!patronOKpass.test(password))  {
  95.          alert("la contraseña debe de ser entre 4 y 8 caracteres");
  96.         return (false);
  97.          }
  98.  
  99.  
  100. var rpassword = frm.rpassword.value;
  101. if (rpassword != password) {
  102.                         alert("Las contraseñas no coinciden, revíselo");
  103.                         return (false);
  104.            } else{
  105.                        alert("Muchas gracias por enviar el formulario");
  106.         return (true);
  107. }
  108. }
  109. </script>
  110. </head>
  111. <body>
  112. <form name="formulario" action="form.html" method="post" onsubmit="return valida_envia(this);">
  113.     <h1>DATOS PERSONALES</h1>
  114.     <P>Rellenar las casillas siguientes con sus datos personales</P>
  115.     <table>
  116.         <tr>
  117.             <td>Nombre(*):</td>
  118.             <td><input type="text" value="" name="nombre" size="30" maxlength="30"></td>
  119.         </tr>
  120.         <tr>
  121.             <td>1 Apellido (*):</td>
  122.             <td><input type="text" value="" name="apellido1" size="30" maxlength="30"></td>
  123.         </tr>
  124.         <tr>
  125.             <td>2º Apellido (*):</td>
  126.             <td><input type="text" value="" name="apellido2" size="30" maxlength="30"></td>
  127.         </tr>
  128.         <tr>      
  129.             <td>Sexo(*):</td>
  130.             <td><input type="radio" name="sexo" value="Varon" checked> Hombre</td>
  131.             <td><input type="radio" name="sexo" value="Hembra"> Mujer</td>
  132.         </tr>
  133.         <tr>
  134.               <td>Fecha de nacimiento(*):</td>
  135.               <td>día:</td>
  136.               <td>    <select name="dia">
  137.                             <option value="1">1 </option>
  138.                             <option value="2">2 </option>
  139.                             <option value="3">3 </option>
  140.                             </select>
  141.                  </td>
  142.                  <td>mes:</td>
  143.                              <td>
  144.                              <select name="mes">
  145.                             <option value="1">1 </option>
  146.                             <option value="2">2 </option>
  147.                             </select>
  148.                             </td>
  149.                             <td>Año(*):</td>
  150.                             <td> <input type="text" value="" name="ano" size="4" maxlength="4"></td>
  151.         </tr>
  152.         <tr>
  153.              <td>N.I.F.(*):</td>
  154.              <td> <input type="text" value="" name="nif" size="9" maxlength="9"></td>
  155.         </tr>
  156.         <tr>
  157.               <td>Tipo de via:</td>
  158.               <td>    <select name="tipocalle">
  159.                             <option value="1">Calle </option>
  160.                             <option value="2">Avenida </option>
  161.                             <option value="3">Travesera </option>
  162.                             <option value="4">Paseo </option>
  163.                             <option value="5">Rambla </option>
  164.                             <option value="6">Plaza </option>
  165.                       </select>
  166.             </td>
  167.        </tr>
  168.        <tr>
  169.              <td>Dirección (*):</td>
  170.              <td><input type="text" value="" name="direccion" size="50" maxlength="50"></td>
  171.        </tr>
  172.        <tr>
  173.              <td>Numero (*):</td>  
  174.              <td><input type="text" value="" name="numero" size="4" maxlength="4"></td>    
  175.        </tr>
  176.        <tr>    
  177.              <td>Portal:  
  178.              <td><input type="text" value="" name="portal" size="3" maxlength="3"></td>    
  179.              <td>Escalera:
  180.              <td><input type="text" value="" name="escalera" size="1" maxlength="1"></td>
  181.        </tr>
  182.        <tr>
  183.              <td>Piso:
  184.              <td><input type="text" value="" name="piso" size="2" maxlength="2"></td>    
  185.              <td>Puerta:
  186.              <td><input type="text" name="puerta" size="2" maxlength="2"></td>
  187.        </tr>
  188.        <tr>    
  189.              <td>Código Postal (*):  
  190.              <td><input type="text" value="" name="cpostal" size="5" maxlength="5"></td>  
  191.        </tr>
  192.        <tr>    
  193.              <td>Población (*):
  194.              <td><input type="text" value="" name="poblacion" size="25" maxlength="25"></td>
  195.        </tr>
  196.        <tr>
  197.              <td>Email@ (*):
  198.              <td><input type="text" value="" name="email" size="25" maxlength="25" ></td>
  199.        </tr>
  200.        <tr>
  201.              <td>Telefono (*):
  202.              <td><input type="text" value="" name="telefono" size="9" maxlength="9"></td>
  203.        </tr>    
  204.              <td>Telefono Móbil :
  205.              <td><input type="text" value="" name="mobil" size="9" maxlength="9"></td>
  206.         <tr>  
  207.              <td>Contraseña (*):
  208.              <td><input type="password" value="" name="password"size="8" maxlength="8"></td>
  209.         </tr>
  210.         <tr>    
  211.              <td>Repetir Contraseña (*):
  212.              <td><input type="password" value="" name="rpassword"size="8" maxlength="8"></td>
  213.          </tr>
  214.          <tr>
  215.          
  216.          <td><input type="submit" value="Enviar" name="envio"></td>
  217.          <td><input name="Restablecer" type="reset" /></td>
  218.          </tr>
  219.  </table>
  220.      </form>
  221. </body>
  222. </html>

Pd: A los select les he quitado opciones por que superaba la cantidad de caracteres admitidos por post

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />