Ejemplo de validación de formularios con JQuery


Código fuente del formulario
Descargar JQuery traducidos Aqui




   <html>
        <head>
            
            
            <?php $jjq = base_url()."js/jquery-latest.js";
                  $jja = base_url()."js/jquery.validate.js";
        
        echo "&lt;script src='$jjq'></script>";
        echo "


        <script src='$jja'>
    </script>";
        
        ?>
     
            <style type="text/css">
     
                * { font-family: Verdana; font-size: 96%; }
                label { width: 10em; float: left; }
                label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
               p { clear: both; }
               .submit { margin-left: 12em; }
               em { font-weight: bold; padding-right: 1em; vertical-align: top;                     }
           </style>
                 
   <!-- Script para validar que por lo menos un checkbox este activado  -->
   <script> 
   function validar(esto){ 
   valido=false; 
   for(a=0;a<esto.elements.length;a++){ 
   if(esto[a].type=="checkbox" && esto[a].checked==true){
   valido=true; 
   break 
   } 
    
   } 
   if(!valido){ 
   alert("Chequee una casilla!");return false
   } 
    
   }  
    
    
</script>

      
                <script type="text/javascript">
     
    $(document).ready(function(){
    $("body div:last").remove();
    });
</script>

     
     
 <script>
      $(document).ready(function(){
     $("#registro").validate({
      rules: {
        nom_usu: {
          required: true,
          maxlength: 25,
         minlength:    3
       },
       
       login: {
         required: true,
          maxlength: 2,
         minlength:    2,
         number: true
       },
       
       psw: {
         required: true,
          maxlength: 10,
         minlength:    6,
         number: true,
         equalTo: "#psw1"
    
       },
       
       psw {
         required: true,
          maxlength: 10,
         minlength:    6,
         number: true
    
       },
       
       acceso: {
         required: true
       },
       
       
       status: {
         required: true
       }
     }
   });


     
</script>
      
     <style>
         label{
           width:150px;
           display: inline-block;
       }
     </style>
     
   </head>
   <body>
     <div id="container" align="center">
     
     
     <form id="registro" name="registro" onclick="return validar(this)" action="&lt;?=base_url()?>index.php/users/addUser" method="POST">
       
       
       <b><label for="login">Usuario:</label></b>
       <input type="text" name="login" id="login" onchange=""/> <br />
       
       
       <b><label for="nom_usu">Nombre:</label></b>
       <input type="text" name="nom_usu" id="nom_usu"/><br />
       
       <b><label for="psw">Contraseña</label></b>
       <input type="password" name="psw" id="psw" /><br />
       
       
       <b><label for="psw1">Repite contraseña</label></b>
       <input type="password" name="psw1" id="psw1"/><br />
       
       <b><label>Tipo de usuario</label></b>
       <select name="acceso" id="acceso">
           <option value="0">Registrado</option>
           <option value="1">Administrador</option>
       
       </select>
       <br />
       <br />
       
       <b><label>Estado de usuario</label></b>
       Activado<input type="radio" name="status" id="status" value="1"/>
       Desactivado<input type="radio" name="status" id="status" value="0"/>
       
       <br />
       <br />
       <br />
       
       
       <b><label for="local">Llamadas locales</label></b>
       <input type='checkbox' name="local" id="local" value='1' /> 
       <br />
       <br />
       
       <!--
       <b><label for="local">Llamadas locales</label></b>
       Activadas<input type="radio" name="local" id="local" value="1"/>
       Desactivadas<input type="radio" name="local" id="local" value="0"/>
       <br />
       <br />-->
       
       <b><label for="ld_nacional">Llamadas a larga distancia nacional</label></b>
       <input type='checkbox' name="ld_nacional" id="ld_nacional" value='1' />
       <br />
       <br />
       <br />
       <!--
       <b><label for="ld_nacional">Llamadas a larga distancia nacional</label></b>
       Activadas<input type="radio" name="ld_nacional" id="ld_nacional" value="1"/>
       Desactivadas<input type="radio" name="ld_nacional" id="ld_nacional" value="0"/>
       <br />
       <br />
       <br />-->
       
       <b><label for="cel_local">Llamadas a celular <br />local   </label></b>
       <input type='checkbox' name="cel_local" id="cel_local" value='1' />
       <br />
       <br />
       <br />
       
       <!--
       <b><label for="cel_local">Llamadas a celular <br />local   </label></b>
       Activadas<input type="radio" name="cel_local" id="cel_local" value="1"/>
       Desactivadas<input type="radio" name="cel_local" id="cel_local" value="0"/>
       <br />
       <br />
       <br />-->
       
       
       <b><label for="cel_ld">Llamadas a celular a larga distancia</label></b>
       <input type='checkbox' name="cel_ld" id="cel_ld" value='1' />
       
      <br />
      <br />
      <br />
      
      <!--
      <b><label for="cel_ld">Llamadas a celular a larga distancia</label></b>
      
      Activadas<input type="radio" name="cel_ld" id="cel_ld" value="1"/>
      Desactivadas<input type="radio" name="cel_ld" id="cel_ld" value="0"/>
      <br />
      <br />
      <br />-->
      
      <b><label for="internacional">Llamadas internacionales</label></b>
      <input type='checkbox' name="internacional" id="internacional" value='1' />
      <br />
      <br />
      <br />
      <!--
      <b><label for="internacional">Llamadas internacionales</label></b>
      Activadas<input type="radio" name="internacional" id="internacional" value="1"/>
      Desactivadas<input type="radio" name="internacional" id="internacional" value="0"/>
      <br />
      <br />
      <br />
      -->
      
   
      <input type="submit" name="submit" value="Registrar"/><br />
      
      
      
      </form>
  </div>
  </div>
   
   
  </body>
  </html>

Comentarios

Publicar un comentario

Entradas populares