Foros del Web » Programando para Internet » Jquery »

Problema al validar nick con jquery.validate()

 Estas en el tema de Problema al validar nick con jquery.validate() en el foro de Jquery en Foros del Web. Buenos días, Estoy usando la librería jquery.validate y la verdad es que va muy bien. Sin embargo, me gustaría comprobar si el nick que está ...
  #1 (permalink)  
Antiguo 24/09/2010, 05:07
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Problema al validar nick con jquery.validate()
Buenos días,

Estoy usando la librería jquery.validate y la verdad es que va muy bien.
Sin embargo, me gustaría comprobar si el nick que está escribiendo el usuario está en la base de datos o no.

Esta parte la tengo, pero solo me muestra el mensaje de excepción "El usuario ya existe" cuando el usuario ya existe. Me gustaría mostrar también un mensaje diciendo "Usuario disponible" cuando este no exista.

Se le puede decir al jquery que muestre ese mensaje?

Ahora mismo tengo lo siguiente:

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

comprobar.php
Código PHP: 
Ver original
  1. <?php
  2. $formUsuario=$_GET['usuario'];
  3. $conexion = mysql_connect("localhost", "root", "xxxx");
  4. mysql_select_db("usuarios");
  5. $sql = "SELECT id from users where username='$formUsuario'";
  6. $resultado = mysql_query($sql, $conexion);
  7. if(mysql_fetch_assoc($resultado)){
  8.     echo "false";
  9. }else{
  10.     echo "true";
  11. }
  12. ?>

Si el usuario no existe en la base de datos devuelvo un TRUE a la función jquery

usuario:{
required:true,
regex:"^[a-zA-Z0-9_]+$",
remote:"comprobar.php"
},

Pero los mensajes solo he conseguido que salgan cuando recibo un false

¿Se os ocurre alguna forma de lograrlo?

Mil gracias de antemano!
  #2 (permalink)  
Antiguo 24/09/2010, 07:38
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
yo tengo algo así

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

fijate que simulo nomás esto, que seria una petoción a la db
if (value == 'asd'){
  #3 (permalink)  
Antiguo 27/09/2010, 00:05
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
yo tengo algo así

fijate que simulo nomás esto, que seria una petoción a la db
if (value == 'asd'){
Buenas Dany_s,

Funciona tal y como deseaba, me aparece el texto tanto si está en uso como si sino.

Pero como hago para que el valor ingresado lo compare con la base de datos? porque ahora mismo no me hace ninguna petición ajax

En el primer post está el código que utilizo para hacer la búsqueda en la BD

Pego el fragmento .js

Código Javascript: 
Ver original
  1. $(document).ready(function(){
  2.     $.validator.addMethod("regex",function(value,element,regexp){
  3.         var re= new RegExp(regexp);
  4.         return this.optional(element) || re.test(value);
  5.     },"Solo caracteres alfanumericos");
  6.     $.validator.addMethod("comprobarUsuario",function(value,element){
  7.         //Simulo petición, una respuesta (pero comparo con el valor del input)
  8.         if (value == 'neo'){
  9.             usuarioValido = true;
  10.             return true;
  11.          } else {
  12.             usuarioValido = false;
  13.             return false;
  14.          }                    
  15.     },"Usuario ocupado");
  16.     
  17.     $("#crear_cuenta").validate({
  18.         rules:{
  19.             nombre:{required:true},
  20.             
  21.             username:{
  22.                 required:true,
  23.                 regex:"^[a-zA-Z0-9_]+$",
  24.                 comprobarUsuario:"comprobar.php"
  25.             },

¿Debería enviar los datos según escribo al script comprobar.php, no?
No sé que hago mal

Pues no realiza ninguna petición en ajax... :S

También me gustaría saber, cómo lo hago para que en lugar del valor de este if
if (value == 'neo'){
pueda comparar con el de la respuesta del fichero comprobar.php??

Gracias de antemano
  #4 (permalink)  
Antiguo 27/09/2010, 05:12
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
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/
  #5 (permalink)  
Antiguo 27/09/2010, 13:45
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
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

estudiate esto http://api.jquery.com/jQuery.ajax/
Muchas gracias Dany_s,

Resulta que me aparece el texto "Usuario disponible" en cada campo que el usuario introduce correctamente, al final tengo todos los campos con el texto "Usuario disponible"

Creo que es por este trozo

Código Javascript: 
Ver original
  1. submitHandler:function(){
  2.             alert("Los datos han sido enviados");
  3.         }, success: function(label) {
  4.             if (usuarioValido){
  5.                 label.addClass('valid').text("Usuario disponible");
  6.             }
  7.         }

Y leyendo el código solo debería mostrar este texto si el la variable usuarioValido es true, pero por qué los muestra en todos los campos y no solo en el del usuario??

También he intentado reducir el número de querys que se hace en ese input, para que en lugar de enviar cada carácter que el usuario introduce por ajax, sino que espere que el usuario cambie de foco para decir si el usuario esta cogido o no.

He intentado usar onkeyup: false al final del script pero cuando escribo el usuario y cambio a otro input este no se valida, hasta que no vuelvo a pulsar sobre el input del usuario.

¿Me recomiendas otra forma?

Muchas gracias de antemano!
  #6 (permalink)  
Antiguo 29/09/2010, 00:45
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Problema al validar nick con jquery.validate()
Buenas,

¿Sabéis como evitar que aparezca el mensaje "usuario valido" en todos los campos, y solo aparezca en el campo usuario?

He estado leyendo la documentación y veo que la función success agrega el texto en todos los campos "correctos"

http://docs.jquery.com/Plugins/Validation/validate

No hay ninguna manera de evitar esto?

Muchas gracias de antemano
  #7 (permalink)  
Antiguo 30/09/2010, 07:37
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
era mas sencillo, se puede poner las reglas como atributo de un elemeto, por ej:

Código HTML: 
Ver original
  1. <div>
  2.     <label class="campo">Usuario:</label>
  3.     <input type="text" id="usuario" miRegla="elValor" name="usuario" />
  4. </div>

fijate en miRegla="elValor"

y el método propio 'miRegla'

Código Javascript: 
Ver original
  1. $.validator.addMethod("miRegla",function(value,element,valorMiRegla){
  2.     alert(valorMiRegla);
  3.     return false;
  4. },"El mensaje de miRegla.");

el primer parámetro de addMethod es el atributo que está en el elemento, el segundo es la función que tiene tres parámetros, el valor del input, el input (el elemento) y el valor de la regla o sea el valor del atributo miRegla que en el ejemplo es "elValor" entonces que eso comparás para devolver true o false, y bueno el tercero es el mensaje.

con eso ya podes hacer una petición ajax

podés usar el la regla del plugin 'remote' que hace petición remota y el parámetro que manda es el atributo name del input y a la url que especificas como valor del atributo remote

o sea que si tenes tu input
Código HTML: 
Ver original
  1. <div>
  2.     <label class="campo">Usuario:</label>
  3.     <input type="text" id="usuario" remote="comprobar.php" name="usuario" />
  4. </div>

se envia a comprobar.php?usuario=elValorDelInput

acordate de agregar el mensaje haciendo referencia a esa regla remote

Código Javascript: 
Ver original
  1. usuario:{
  2.    required:"Campo obligatorio",
  3.    remote: jQuery.validator.format("El usuario {0} ya existe.")
  4. }

fijate que para ese mensaje uso el método format para entregar un mensaje junto con el valor del input {0} fijate la doc

y fijate en los plugins que siempre abajo hay ejemplos y podes ver el código fuente para ver cómo lo hacen

TIP: seguramente que queres tener un html válido, pero si agregas un atributo como 'miRegla' en el elemento, no es conocido por lo tanto el validador te da error o advertencia, entonces podés agregar ese atributo con jQuery $('#usuario').attr('miRegla', 'elValor')
  #8 (permalink)  
Antiguo 30/09/2010, 11:58
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Problema al validar nick con jquery.validate()
Buenas Dani_s,

Muchas gracias nuevamente

He intentado aplicarlo pero no me funciona correctamente, algo hago mal

Quiero poder mostrar el mensaje de usuario disponible o usuario ocupado según corresponda en el campo "usuario" y no hay manera...

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.                 $.validator.addMethod("miRegla",function(value,element,valorMiRegla){
  27.                     $.ajax({
  28.                         type: "GET",
  29.                         url: valorMiRegla,
  30.                         data: "usuario="+value,
  31.                         success: function(disponible){
  32.                             if (disponible){
  33.                                 return true;
  34.                             }else{
  35.                                 return false;
  36.                             }
  37.                         }
  38.                     });
  39.                 },"Usuario ocupado");
  40.                 
  41.                 
  42.                 $("#registro").validate({
  43.                     rules:{
  44.                             usuario:{
  45.                                 required:true,
  46.                                 regex:"^[a-zA-Z0-9_]+$",
  47.                                 miRegla:"comprobar.php"
  48.                             },
  49.                             pass:{
  50.                                 required:true
  51.                             },
  52.                             pass2:{
  53.                                 equalTo:"#pass"
  54.                             },
  55.                             email:{
  56.                                 email:true,
  57.                                 required:true
  58.                             },
  59.                             sitioweb:{
  60.                                 url:true
  61.                             },
  62.                             lenguaje:{
  63.                                 required:true
  64.                             }
  65.                     },
  66.                     messages:{
  67.                         usuario:{
  68.                             required:"Campo obligatorio",
  69.                             remote: jQuery.validator.format("El usuario {0} ya existe.")
  70.                         },
  71.                         pass:{
  72.                             required:"Campo obligatorio"
  73.                         },
  74.                         pass2:{
  75.                             equalTo:"La contraseña no es igual"
  76.                         },
  77.                         email:{
  78.                             email:"El email no es valido",
  79.                             required:"Campo es obligatorio"
  80.                         },
  81.                         sitioweb:{
  82.                             url:"La url no es valida"
  83.                         },
  84.                         lenguaje:{
  85.                             required:"Campo obligatorio"
  86.                         }
  87.                     },
  88.                     submitHandler:function(){
  89.                         alert("Los datos han sido enviados");
  90.                     }/*, success: function(label) {
  91.                         if (usuarioValido){
  92.                             label.addClass('valid').text("Usuario disponible");
  93.                         }
  94.                     }*/
  95.  
  96.                 })
  97.             })
  98.         </script>
  99.     </head>
  100.     <body>
  101.         <fieldset>
  102.             <legend>Ingreso de usuario</legend>
  103.             <form id="registro" name="registro" action="">
  104.                 <div>
  105.                     <label class="campo">Usuario:</label>
  106.                     <input type="text" id="usuario" miRegla="" name="usuario" />
  107.                 </div>
  108.                 <div>
  109.                     <label class="campo">Contraseña:</label>
  110.                     <input type="text" id="pass" name="pass" />
  111.                 </div>
  112.                 <div>
  113.                     <label class="campo">Repetir:</label>
  114.                     <input type="text" id="pass2" name="pass2" />
  115.                 </div>
  116.                 <div>
  117.                     <label class="campo">Email:</label>
  118.                     <input type="text" id="email" name="email" />
  119.                 </div>
  120.                 <div>
  121.                     <label class="campo">Sitio web:</label>
  122.                     <input type="text" id="sitioweb" name="sitioweb" />
  123.                 </div>
  124.                 <div>
  125.                     <label class="campo">Lenguaje:</label>
  126.                     <select id="lenguaje" name="lenguaje">
  127.                         <option selected="selected" value="">Selecione un lenguaje</option>
  128.                         <option value="1">PHP</option>
  129.                         <option value="2">JAVA</option>
  130.                         <option value="3">ASP.NET</option>
  131.                     </select>
  132.                 </div>
  133.                 <input type="submit" value="Registrar" />
  134.             </form>
  135.         </fieldset>
  136.     </body>
  137. </html>

Muchas gracias de antemano!
  #9 (permalink)  
Antiguo 30/09/2010, 13:08
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
tenes tu regla de validacion

acá
Código Javascript: 
Ver original
  1. rules:{
  2.                             usuario:{
  3.                                 required:true,
  4.                                 regex:"^[a-zA-Z0-9_]+$",
  5.                                 miRegla:"comprobar.php"
  6.                             },

y acá

Código HTML: 
Ver original
  1. <div>
  2.                     <label class="campo">Usuario:</label>
  3.                     <input type="text" id="usuario" miRegla="" name="usuario" />
  4.                 </div>

o uno o lo otro

y acá estas tratando de mostrar un mensaje de error para la regla 'remote' que ni indicaste como validación
Código Javascript: 
Ver original
  1. usuario:{
  2.                             required:"Campo obligatorio",
  3.                             remote: jQuery.validator.format("El usuario {0} ya existe.")
  4.                         },
  #10 (permalink)  
Antiguo 30/09/2010, 13:10
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
tenes tu regla de validacion

acá
Código Javascript: 
Ver original
  1. rules:{
  2.                             usuario:{
  3.                                 required:true,
  4.                                 regex:"^[a-zA-Z0-9_]+$",
  5.                                 miRegla:"comprobar.php"
  6.                             },

y acá

Código HTML: 
Ver original
  1. <div>
  2.                     <label class="campo">Usuario:</label>
  3.                     <input type="text" id="usuario" miRegla="" name="usuario" />
  4.                 </div>

o uno o lo otro

y acá estas tratando de mostrar un mensaje de error para la regla 'remote' que ni indicaste como validación
Código Javascript: 
Ver original
  1. usuario:{
  2.                             required:"Campo obligatorio",
  3.                             remote: jQuery.validator.format("El usuario {0} ya existe.")
  4.                         },
vas a usar tu propia regla "miRegla" y usar el método ajax o "remote" que ya hace la petición?
  #11 (permalink)  
Antiguo 30/09/2010, 13:48
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
vas a usar tu propia regla "miRegla" y usar el método ajax o "remote" que ya hace la petición?
Pues en teoría el que me permita poder mostrar el mensaje de "Usuario disponible" o "Usuario ocupado".

Cuál de los dos me permite y cómo muestro uno u otro mensaje sin afectar al resto de campos?

Gracias nuevamente
  #12 (permalink)  
Antiguo 24/11/2010, 06:16
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
vas a usar tu propia regla "miRegla" y usar el método ajax o "remote" que ya hace la petición?
Dany, tengo un problema similar, pero pese a que le he dado vueltas no consigo que funcione, es posible que me ayudes, tengo un registro de articulos hecho en php+mysql pero soy nuevo en jquery.
La idea es que cuando el usuario ingreso un codigo de articulo controlar en la base que no exista pero consultando grupo, subgrupo y codigo de articulo, la idea es la siguiente:
Código: 
<form action="javascript: fn_agregar();" method="post" id="frm_art">
<div>Grupo:
  <select name="idg" id="idg" class="required" onchange="cargar_subg()">
<option value=""></option>
</select>
</div>
<div>Subgrupo:
<select name="idsubg" id="idsubg" class="required">
<option value="">Seleccione grupo</option>
</select></div>
<div>Codigo Articulo:<input name="codart" type="text" id="codart" size="11" class="required" /></div>
<div><input name="agregar" type="submit" value="Agregar" /></div>
</form>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        var bandera;
$.validator.addMethod("valida_art",function(value,element){
            $.ajax({
                type: "GET",
                url: "art/ajax_verificar_codart.php",
                data: "codart="+value+"&idg="+$("#idg").val()+"&idsubg="+$("#idsubg").val(),
                success: function(disponible){
                    if(disponible == 'true'){
                        alert("dis: "+disponible);
                        bandera = true;
                        return bandera;
                    }else{
                        alert("dis: "+disponible);
                        bandera = false;
                        return bandera;
                    }
                }
            });
});
        $("#frm_art").validate({
            rules:{
                codart:{
                    required: true,
                    valida_art: true,
                }
            },
            messages: {
                codart: {
                    required: "Debe ingresar codigo",
                    valida_art: "Codigo ya Existe"
                }
            },
            onkeyup: false,
            submitHandler: function(form) {
                var respuesta = confirm('\xBFDesea agregar el articulo?')
                if (respuesta){
                    form.submit();
                }
            }
        });
    });
y el php
Código PHP:
$codart = $_GET['codart'];
    $ca = mysql_query("SELECT * FROM articulos WHERE idg='".$_GET['idg']."' AND idsubg='".$_GET['idsubg']."' AND codart='$codart'");
    $num_rs_ca = mysql_num_rows($ca);
    if($num_rs_ca == 0){
        echo "true";
    }else{
        echo "false";
    } 
Lo logrado hasta ahora es:
= filtrar los subgrupos en funcion al grupo que se seleccione. Que el control que hace php funcione.
NO LOGRO que el validate me responda bien en funcion al codigo existente.

Desde ya te agradezco la ayuda que me puedas dar. Saludos.
  #13 (permalink)  
Antiguo 24/11/2010, 17:28
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
tenés que retornar verdadero o falso en la función de callback del método "addMethod" y no en la función del callback del success
  #14 (permalink)  
Antiguo 24/11/2010, 19:01
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Problema al validar nick con jquery.validate()
Gracias por tu pronta respuesta Dany_s, el tema es que probe antes de hacerlo como me decis y ver con un alert como se comportaba pero me daba error ya que ejecutaba el return del bandera y luego el success, lo habia echo asi:
Código: 
$(document).ready(function(){
  var bandera;
$.validator.addMethod("valida_art",function(value,element){
            $.ajax({
                type: "GET",
                url: "art/ajax_verificar_codart.php",
                data: "codart="+value+"&idg="+$("#idg").val()+"&idsubg="+$("#idsubg").val(),
                success: function(disponible){
                    if(disponible == 'true'){
                        bandera = true;
                    }else{
                        bandera = false;
                    }
                }
            });
            alert(bandera);
            return bandera;
});
a la primera validacion me daba undefined, luego en las posteriores pruebas siempre el alert me tomaba la validacion anterior, es decir, si en la busqueda me daba false y volvia a buscar y me daba true, la primera me deba undefined y la segunda false y si probaba una tercera true, no se si soy claro, como que en cada validación recuperaba siempre la condición anterior.
1º undefined
2º condicion de la 1º
3º condicion de la 2º
etc.
Como debería ser, ya que como te comenté antes, me doy maña con php y mysql pero me faltan horas de teclado con jquery.
Desde ya te agradezco tu tiempo
  #15 (permalink)  
Antiguo 24/11/2010, 20:20
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 4 meses
Puntos: 65
Respuesta: Problema al validar nick con jquery.validate()
pasa que hace una llamada asincrónica, podes usar el parámetro async:false pero da una sensación de bloqueo si tarda mucho

porque no usas remote?
fijate la doc http://docs.jquery.com/Plugins/Valid...remote#options

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.  
  10.  
  11.                 $("#form").validate({
  12.                     rules:{
  13.                             codart:{
  14.                               remote: {
  15.                                 url: "x.php",
  16.                                 type: "post",
  17.                                 data: {
  18.                                   idg: function() {
  19.                                     return $("#idg").val();
  20.                                   },
  21.                                   idsubg: function() {
  22.                                     return $("#idsubg").val();
  23.                                   }
  24.                                 }
  25.                               }
  26.                             }
  27.                     },
  28.                     messages:{
  29.                         codart:{
  30.                             remote:"mensaje"
  31.                         }
  32.                     },
  33.                     submitHandler:function(){
  34.                         alert("Los datos han sido enviados");
  35.                     }
  36.                 })
  37.             })
  38.         </script>
  39.     </head>
  40.     <body>
  41.         <fieldset>
  42.             <legend>Ingreso de usuario</legend>
  43.             <form id="form" name="form" action="">
  44.                 <div>
  45.                     <label class="codart">Código:</label>
  46.                     <input type="text" id="codart" name="codart" />
  47.                 </div>
  48.                 <input type="submit" value="Registrar" />
  49.             </form>
  50.         </fieldset>
  51.     </body>
  52. </html>
  #16 (permalink)  
Antiguo 25/11/2010, 20:04
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Problema al validar nick con jquery.validate()
Cita:
Iniciado por Dany_s Ver Mensaje
pasa que hace una llamada asincrónica, podes usar el parámetro async:false pero da una sensación de bloqueo si tarda mucho

porque no usas remote?
fijate la doc [URL]http://docs.jquery.com/Plugins/Validation/Methods/remote#options[/URL]

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.  
  10.  
  11.                 $("#form").validate({
  12.                     rules:{
  13.                             codart:{
  14.                               remote: {
  15.                                 url: "x.php",
  16.                                 type: "post",
  17.                                 data: {
  18.                                   idg: function() {
  19.                                     return $("#idg").val();
  20.                                   },
  21.                                   idsubg: function() {
  22.                                     return $("#idsubg").val();
  23.                                   }
  24.                                 }
  25.                               }
  26.                             }
  27.                     },
  28.                     messages:{
  29.                         codart:{
  30.                             remote:"mensaje"
  31.                         }
  32.                     },
  33.                     submitHandler:function(){
  34.                         alert("Los datos han sido enviados");
  35.                     }
  36.                 })
  37.             })
  38.         </script>
  39.     </head>
  40.     <body>
  41.         <fieldset>
  42.             <legend>Ingreso de usuario</legend>
  43.             <form id="form" name="form" action="">
  44.                 <div>
  45.                     <label class="codart">Código:</label>
  46.                     <input type="text" id="codart" name="codart" />
  47.                 </div>
  48.                 <input type="submit" value="Registrar" />
  49.             </form>
  50.         </fieldset>
  51.     </body>
  52. </html>
Dany_s sos un maestro, me volvi loco intentando sacarlo, perfecto, funciono de 10. Te agradezco infinitamente la desburrada. Un abrazo!!
  #17 (permalink)  
Antiguo 30/01/2012, 14:22
 
Fecha de Ingreso: diciembre-2011
Mensajes: 13
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Problema al validar nick con jquery.validate()
hola Dany_s me colaboras plis
estoy brondando de esta forma
prueba.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formulario Validation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var usuarioValido;
$.validator.addMethod("regex",function(value,eleme nt,regexp){
var re= new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Solo caracteres alfanumericos");

/*$.validator.addMethod("comprobarUsuario",function (value,element, url){
$.ajax({
type: "GET",
url: url,
data: "usuario="+value,
success: function(disponible){
usuarioValido = (disponible == 'true')?true:false;
}
});
return usuarioValido;
},"Usuario ocupado");*/
$.validator.addMethod("miRegla",function(value,ele ment,valorMiRegla){
$.ajax({
type: "GET",
url: valorMiRegla,
data: "usuario="+value,
success: function(disponible){
if (disponible){
return true;
}else{
return false;
}
}
});
},"Usuario ocupado");


$("#registro").validate({
rules:{
usuario:{
required:true,
regex:"^[a-zA-Z0-9_]+$",
miRegla:"comprobar.php"
},
pass:{
required:true
},
pass2:{
equalTo:"#pass"
},
email:{
email:true,
required:true
},
sitioweb:{
url:true
},
lenguaje:{
required:true
}
},
messages:{
usuario:{
required:"Campo obligatorio",
remote: jQuery.validator.format("El usuario {0} ya existe.")
},
pass:{
required:"Campo obligatorio"
},
pass2:{
equalTo:"La contraseña no es igual"
},
email:{
email:"El email no es valido",
required:"Campo es obligatorio"
},
sitioweb:{
url:"La url no es valida"
},
lenguaje:{
required:"Campo obligatorio"
}
},
submitHandler:function(){
alert("Los datos han sido enviados");
}/*, success: function(label) {
if (usuarioValido){
label.addClass('valid').text("Usuario disponible");
}
}*/

})
})
</script>
</head>
<body>
<fieldset>
<legend>Ingreso de usuario</legend>
<form id="registro" name="registro" action="">
<div>
<label class="campo">Usuario:</label>
<input type="text" id="usuario" miRegla="" name="usuario" />
</div>
<div>
<label class="campo">Contraseña:</label>
<input type="text" id="pass" name="pass" />
</div>
<div>
<label class="campo">Repetir:</label>
<input type="text" id="pass2" name="pass2" />
</div>
<div>
<label class="campo">Email:</label>
<input type="text" id="email" name="email" />
</div>
<div>
<label class="campo">Sitio web:</label>
<input type="text" id="sitioweb" name="sitioweb" />
</div>
<div>
<label class="campo">Lenguaje:</label>
<select id="lenguaje" name="lenguaje">
<option selected="selected" value="">Selecione un lenguaje</option>
<option value="1">PHP</option>
<option value="2">JAVA</option>
<option value="3">ASP.NET</option>
</select>
</div>
<input type="submit" value="Registrar" />
</form>
</fieldset>
</body>
</html>
comprobar.php
<?php
$formUsuario=$_GET['usuario'];
$conexion = mysql_connect("localhost", "root", "");
mysql_select_db("usuarios");
$sql = "SELECT id from registro where nombre='$formUsuario'";
$resultado = mysql_query($sql, $conexion);
if(mysql_fetch_assoc($resultado)){
echo "false";
}else{
echo "true";
}
?>

Necesito q consulte en la base de datos y me diga si el email ya esta registrado o no y hacer el registro si el usuario no existe gracias he intentado pero no he podido
  #18 (permalink)  
Antiguo 12/10/2012, 08:37
 
Fecha de Ingreso: agosto-2006
Ubicación: Girardot
Mensajes: 27
Antigüedad: 17 años, 8 meses
Puntos: 2
De acuerdo Respuesta: Problema al validar nick con jquery.validate()
Hola a todos, leyendo sus problemas les comparto uan solución simple:

Regla de validacion dentro del script
$("#id_formulario").validate({
rules: {
....
usuario_txt: {
required: true,
rangelength: [3, 15],
required: "comprobar"
},
Luego un mensaje de texto por si ya existe

messages: {
usuario_txt: {
required: "Este campo ya existe!."
}
}


Y finaliza con la validación del usuario

comprobar.php (comprueba si el usuario existe en la B.D)
<?php
include "conexion.php";
#Recoge el campo del formulario a comprobar
$parametro = $_GET['usuario_txt'];
#SQL a la tabla
$sql = "SELECT * FROM usuarios WHERE login = '$parametro'";
#Manipulación de Errores (Informe de Errores, Emisión de exepciones)
$lnk->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$qry = $lnk->prepare($sql);
$qry->execute();
$reg = $qry->fetch(PDO::FETCH_OBJ);

if($reg->login){
echo "false";
}else{
echo "true";
}

$lnk = null;
?>

Etiquetas: nick
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:40.