Tema: Problema al validar nick con jquery.validate()
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 27/09/2010, 05:12
Dany_s
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 15 años
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
y con ajax, por eso puse "simulo una petición", la respuesta tiene que devolver true o false o lo que quieras para decirle al plugin que mostrar

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title>Formulario Validation</title>
  5.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  6.         <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  7.         <script type="text/javascript">
  8.             $(document).ready(function(){
  9.                 var usuarioValido;
  10.                 $.validator.addMethod("regex",function(value,element,regexp){
  11.                     var re= new RegExp(regexp);
  12.                     return this.optional(element) || re.test(value);
  13.                 },"Solo caracteres alfanumericos");
  14.  
  15.                 $.validator.addMethod("comprobarUsuario",function(value,element, url){
  16.                     $.ajax({
  17.                         type: "GET",
  18.                         url: url,
  19.                         data: "usuario="+value,
  20.                         success: function(disponible){
  21.                             usuarioValido = (disponible == 'true')?true:false;
  22.                         }
  23.                     });
  24.                     return usuarioValido;
  25.                 },"Usuario ocupado");
  26.  
  27.                 $("#registro").validate({
  28.                     rules:{
  29.                             usuario:{
  30.                                 required:true,
  31.                                 regex:"^[a-zA-Z0-9_]+$",
  32.                                 comprobarUsuario:"comprobar.php"
  33.                             },
  34.                             pass:{
  35.                                 required:true
  36.                             },
  37.                             pass2:{
  38.                                 equalTo:"#pass"
  39.                             },
  40.                             email:{
  41.                                 email:true,
  42.                                 required:true
  43.                             },
  44.                             sitioweb:{
  45.                                 url:true
  46.                             },
  47.                             lenguaje:{
  48.                                 required:true
  49.                             }
  50.                     },
  51.                     messages:{
  52.                         usuario:{
  53.                             required:"Campo obligatorio"
  54.                         },
  55.                         pass:{
  56.                             required:"Campo obligatorio"
  57.                         },
  58.                         pass2:{
  59.                             equalTo:"La contraseña no es igual"
  60.                         },
  61.                         email:{
  62.                             email:"El email no es valido",
  63.                             required:"Campo es obligatorio"
  64.                         },
  65.                         sitioweb:{
  66.                             url:"La url no es valida"
  67.                         },
  68.                         lenguaje:{
  69.                             required:"Campo obligatorio"
  70.                         }
  71.                     },
  72.                     submitHandler:function(){
  73.                         alert("Los datos han sido enviados");
  74.                     }, success: function(label) {
  75.                         if (usuarioValido){
  76.                             label.addClass('valid').text("Usuario disponible");
  77.                         }
  78.                     }
  79.  
  80.                 })
  81.             })
  82.         </script>
  83.     </head>
  84.     <body>
  85.         <fieldset>
  86.             <legend>Ingreso de usuario</legend>
  87.             <form id="registro" name="registro" action="">
  88.                 <div>
  89.                     <label class="campo">Usuario:</label>
  90.                     <input type="text" id="usuario" name="usuario" />
  91.                 </div>
  92.                 <div>
  93.                     <label class="campo">Contraseña:</label>
  94.                     <input type="text" id="pass" name="pass" />
  95.                 </div>
  96.                 <div>
  97.                     <label class="campo">Repetir:</label>
  98.                     <input type="text" id="pass2" name="pass2" />
  99.                 </div>
  100.                 <div>
  101.                     <label class="campo">Email:</label>
  102.                     <input type="text" id="email" name="email" />
  103.                 </div>
  104.                 <div>
  105.                     <label class="campo">Sitio web:</label>
  106.                     <input type="text" id="sitioweb" name="sitioweb" />
  107.                 </div>
  108.                 <div>
  109.                     <label class="campo">Lenguaje:</label>
  110.                     <select id="lenguaje" name="lenguaje">
  111.                         <option selected="selected" value="">Selecione un lenguaje</option>
  112.                         <option value="1">PHP</option>
  113.                         <option value="2">JAVA</option>
  114.                         <option value="3">ASP.NET</option>
  115.                     </select>
  116.                 </div>
  117.                 <input type="submit" value="Registrar" />
  118.             </form>
  119.         </fieldset>
  120.     </body>
  121. </html>

estudiate esto http://api.jquery.com/jQuery.ajax/