Posted on 13-08-2008
Javascript - Validación de Formularios basica
Filed Under (Desarrollo, JavaScript) by Programlocura

Muy pero muy buenas, hoy les traigo un MUY BÁSICO (Incluso alguna se va a reír de mi >_<) ejemplo de validación en Javascript, es como para ir comenzando a familiarizarse con el lenguaje y algunos de sus usos más comunes.

PLAIN TEXT
JavaScript:
  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">
  3. <head>
  4. <title>Titulo Aqui</title>
  5. <script language="javascript">
  6.     function comprobar() {
  7.         error = "";
  8.        
  9.         var doc_1 = document.getElementById("txtNombre").value;
  10.         var doc_2 = document.getElementById("txtApellido").value;
  11.         var doc_3 = document.getElementById("txtComentario").value;
  12.         var doc_4 = document.getElementById("txtTel").value;
  13.         var doc_5 = document.getElementById("txtMail").value;
  14.        
  15.         if (doc_1 == "") {
  16.             error += "- Complete Nombre\n";
  17.         }
  18.        
  19.         if (doc_2 == "") {
  20.             error += "- Complete Apellido\n";
  21.         }
  22.         if (doc_3 == "") {
  23.             error += "- Complete Comentario\n";
  24.         }
  25.        
  26.         if (doc_4 == "") {
  27.             error += "- Complete Telefono\n";
  28.         }else{
  29.             if (isNaN(doc_4)) {
  30.                 error += "- El Telefono es un dato numerico\n";
  31.             }
  32.         }
  33.        
  34.         if (doc_5 == "") {
  35.             error += "- Complete Email\n";
  36.         }else{
  37.             if (doc_5.indexOf("@") == -1){
  38.                 error += "- La direccion es invalida\n";
  39.             }
  40.         }
  41.  
  42.         if(error != "") {
  43.             alert(error);
  44.         }else{
  45.             alert("Formulario enviado con Exito");
  46.         }
  47.     }
  48. </script>
  49. </head>
  50. <body>
  51. <form name="form1" id="formulario" method="post">
  52. <table border="0" width="600">
  53.     <tr>
  54.         <td>Nombre:</td>
  55.         <td><input type="text" id="txtNombre"/></td>
  56.     </tr>
  57.     <tr>
  58.         <td>Apellido:</td>
  59.         <td><input type="text" id="txtApellido"/></td>
  60.     </tr>
  61.     <tr>
  62.         <td>Comentario:</td>
  63.         <td><textarea id="txtComentario"></textarea></td>
  64.     </tr>
  65.     <tr>
  66.         <td>Tel:</td>
  67.         <td><input type="text" id="txtTel"/></td>
  68.     </tr>
  69.     <tr>
  70.         <td>Mail:</td>
  71.         <td><input type="text" id="txtMail"/></td>
  72.     </tr>
  73.     <tr>
  74.         <td><input type="button" onclick="comprobar()" value="Enviar" id="txtEnviar"/></td>
  75.         <td><input type="reset" value="Borrar" id="txtBorrar"/></td>
  76.     </tr>
  77. </table>
  78. </form>
  79. </body>
  80. </html>

Es parte del curso que estoy dando sobre PHP (En el Circulo Informático), es una muy pequeña parte. En próximas entradas pondré algo sobre:

  • Alerts
  • Prompt
  • Confirm
  • Manejo de controles
  • DOM y acceso a objetos HTML

Todo muy básico y simple de modo que sea entendible (Son solo 6 u 8 horas que hay que dedicarle al tema).

P.D: Recomiendo también, esta pagina: Funciones de Strings con JS. Ahi podrán encontrar una amplia lista sobre funciones para utilizar con cualquier String, encontrarán las usadas en el ejemplo para entenderlo mejor.
Espero sea util.

Si te gustó este POST comprame un café, o invitamelo vos. Tirame unos pesos xD

    Read More   
Post a Comment
Name:
Email:
Website:
Comments: