sábado, 27 de octubre de 2012

Ejemplo de validación de formularios con JQuery

 

Código fuente del formulario

Descargar JQuery traducidos Aqui

   1: <html>
   2:     <head>
   3:         
   4:         
   5:         <?php $jjq = base_url()."js/jquery-latest.js";
   6:               $jja = base_url()."js/jquery.validate.js";
   7:     
   8:     echo "&lt;script src='$jjq'></script>
   1: ";
   2:     echo "<script src='$jja'>
   1: </script>";
   2:     
   3:     ?>
   4:  
   5:         <style type="text/css">
   6:  
   7:             * { font-family: Verdana; font-size: 96%; }
   8:             label { width: 10em; float: left; }
   9:             label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  10:             p { clear: both; }
  11:             .submit { margin-left: 12em; }
  12:             em { font-weight: bold; padding-right: 1em; vertical-align: top;                     }
  13:         </style>
  14:               
  15: <!-- Script para validar que por lo menos un checkbox este activado  -->
  16: <script> 
  17: function validar(esto){ 
  18: valido=false; 
  19: for(a=0;a<esto.elements.length;a++){ 
  20: if(esto[a].type=="checkbox" && esto[a].checked==true){ 
  21: valido=true; 
  22: break 
  23: } 
  24:  
  25: } 
  26: if(!valido){ 
  27: alert("Chequee una casilla!");return false 
  28: } 
  29:  
  30: }  
  31:  
  32:  
</script>
   1:   
   2:             <script type="text/javascript">
   3:  
   4: $(document).ready(function(){
   5: $("body div:last").remove();
   6: });
</script>
   1:  
   2:  
   3:          <script>
   4:   $(document).ready(function(){
   5:  $("#registro").validate({
   6:   rules: {
   7:     nom_usu: {
   8:       required: true,
   9:       maxlength: 25,
  10:       minlength:    3
  11:     },
  12:     
  13:     login: {
  14:       required: true,
  15:        maxlength: 2,
  16:       minlength:    2,
  17:       number: true
  18:     },
  19:     
  20:     psw: {
  21:       required: true,
  22:        maxlength: 10,
  23:       minlength:    6,
  24:       number: true,
  25:       equalTo: "#psw1"
  26:  
  27:     },
  28:     
  29:     psw1: {
  30:       required: true,
  31:        maxlength: 10,
  32:       minlength:    6,
  33:       number: true
  34:  
  35:     },
  36:     
  37:     acceso: {
  38:       required: true
  39:     },
  40:     
  41:     
  42:     status: {
  43:       required: true
  44:     }
  45:   }
  46: });
  47:  
  48:   });
  49:   
</script>
   9:   
  10:   <style>
  11:       label{
  12:         width:150px;
  13:         display: inline-block;
  14:     }
  15:   </style>
  16:   
  17: </head>
  18: <body>
  19:   <div id="container" align="center">
  20:   
  21:   
  22:   <form id="registro" name="registro" onclick="return validar(this)" action="&lt;?=base_url()?>index.php/users/addUser" method="POST">
  23:     
  24:     
  25:     <b><label for="login">Usuario:</label></b>
  26:     <input type="text" name="login" id="login" onchange=""/> <br />
  27:     
  28:     
  29:     <b><label for="nom_usu">Nombre:</label></b>
  30:     <input type="text" name="nom_usu" id="nom_usu"/><br />
  31:     
  32:     <b><label for="psw">Contraseña</label></b>
  33:     <input type="password" name="psw" id="psw" /><br />
  34:     
  35:     
  36:     <b><label for="psw1">Repite contraseña</label></b>
  37:     <input type="password" name="psw1" id="psw1"/><br />
  38:     
  39:     <b><label>Tipo de usuario</label></b>
  40:     <select name="acceso" id="acceso">
  41:         <option value="0">Registrado</option>
  42:         <option value="1">Administrador</option>
  43:     
  44:     </select>
  45:     <br />
  46:     <br />
  47:     
  48:     <b><label>Estado de usuario</label></b>
  49:     Activado<input type="radio" name="status" id="status" value="1"/>
  50:     Desactivado<input type="radio" name="status" id="status" value="0"/>
  51:     
  52:     <br />
  53:     <br />
  54:     <br />
  55:     
  56:     
  57:     <b><label for="local">Llamadas locales</label></b>
  58:     <input type='checkbox' name="local" id="local" value='1' /> 
  59:     <br />
  60:     <br />
  61:     
  62:     <!--
  63:     <b><label for="local">Llamadas locales</label></b>
  64:     Activadas<input type="radio" name="local" id="local" value="1"/>
  65:     Desactivadas<input type="radio" name="local" id="local" value="0"/>
  66:     <br />
  67:     <br />-->
  68:     
  69:     <b><label for="ld_nacional">Llamadas a larga distancia nacional</label></b>
  70:     <input type='checkbox' name="ld_nacional" id="ld_nacional" value='1' />
  71:     <br />
  72:     <br />
  73:     <br />
  74:     <!--
  75:     <b><label for="ld_nacional">Llamadas a larga distancia nacional</label></b>
  76:     Activadas<input type="radio" name="ld_nacional" id="ld_nacional" value="1"/>
  77:     Desactivadas<input type="radio" name="ld_nacional" id="ld_nacional" value="0"/>
  78:     <br />
  79:     <br />
  80:     <br />-->
  81:     
  82:     <b><label for="cel_local">Llamadas a celular <br />local   </label></b>
  83:     <input type='checkbox' name="cel_local" id="cel_local" value='1' />
  84:     <br />
  85:     <br />
  86:     <br />
  87:     
  88:     <!--
  89:     <b><label for="cel_local">Llamadas a celular <br />local   </label></b>
  90:     Activadas<input type="radio" name="cel_local" id="cel_local" value="1"/>
  91:     Desactivadas<input type="radio" name="cel_local" id="cel_local" value="0"/>
  92:     <br />
  93:     <br />
  94:     <br />-->
  95:     
  96:     
  97:     <b><label for="cel_ld">Llamadas a celular a larga distancia</label></b>
  98:     <input type='checkbox' name="cel_ld" id="cel_ld" value='1' />
  99:     
 100:     <br />
 101:     <br />
 102:     <br />
 103:     
 104:     <!--
 105:     <b><label for="cel_ld">Llamadas a celular a larga distancia</label></b>
 106:     
 107:     Activadas<input type="radio" name="cel_ld" id="cel_ld" value="1"/>
 108:     Desactivadas<input type="radio" name="cel_ld" id="cel_ld" value="0"/>
 109:     <br />
 110:     <br />
 111:     <br />-->
 112:     
 113:     <b><label for="internacional">Llamadas internacionales</label></b>
 114:     <input type='checkbox' name="internacional" id="internacional" value='1' />
 115:     <br />
 116:     <br />
 117:     <br />
 118:     <!--
 119:     <b><label for="internacional">Llamadas internacionales</label></b>
 120:     Activadas<input type="radio" name="internacional" id="internacional" value="1"/>
 121:     Desactivadas<input type="radio" name="internacional" id="internacional" value="0"/>
 122:     <br />
 123:     <br />
 124:     <br />
 125:     -->
 126:     
 127:  
 128:     <input type="submit" name="submit" value="Registrar"/><br />
 129:     
 130:     
 131:     
 132:     </form>
 133: </div>
 134: </div>
 135:  
 136:  
 137: </body>
 138: </html>