Foros del Web » Programando para Internet » Javascript » Frameworks JS »

jqyery: cursor al salir de una clase

Estas en el tema de jqyery: cursor al salir de una clase en el foro de Frameworks JS en Foros del Web. Hola, amigos: Tengo un problema que no logro resolver. Os explico: Tengo un formulario con múltiples campos, los cuales valido antes de enviar el formulario. ...
  #1 (permalink)  
Antiguo 04/08/2011, 05:56
 
Fecha de Ingreso: junio-2010
Mensajes: 51
Antigüedad: 10 años, 4 meses
Puntos: 0
jqyery: cursor al salir de una clase

Hola, amigos: Tengo un problema que no logro resolver. Os explico:

Tengo un formulario con múltiples campos, los cuales valido antes de enviar el formulario. Si existe alguno incorrecto, le cambio de clase. Por ejemplo:
Código Javascript:
Ver original
  1. if (form.IDNombre.value == "") {
  2.         validar_formulario = false;
  3.         msg_err_formulario = msg_err_formulario + " Debe elegir un nombre de usuario. \n";
  4.         form.IDNombre.className = 'campo_error';
  5.     }
  6.     else {
  7.         form.IDNombre.className = 'texto';
  8.     }

Esto lo compruebo en cada campo que sea requerido. Hasta ahí todo bien. Lo que quiero ahora, es que, si el usuario va al campo que tiene la clase "campo_error", al perder el foco (para ir a otro campo, por ejemplo), compruebe si está o no vacío. Lo intento con jquery:

Código Javascript:
Ver original
  1. $('.campo_error').blur(function(){
  2.        if($(this).text != ''){
  3.            $(this).css(addClass('texto'));
  4.        }
  5.  });

Con esto devuelvo la clase normal del formulario al no estar ya el campo vacío. Pero no funciona. He probado a ponerle un alert antes de comprobar si está o no vacío, pero el alert no aparece.

Sin embargo si en el blur cambio la clase "campo_error" por la clase "texto", que es la original del código, si genera el alert (en un campo que tenga la clase texto, se entiende). Es decir, que parece como si jquery no reconociera la clase "campo_error", al haber sido generada posteriormente mediante javascript.

Alguien me puede aportar alguna solución? Gracias a todos por vuestra paciencia. Un saludo.
  #2 (permalink)  
Antiguo 04/08/2011, 09:52
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 12 años, 2 meses
Puntos: 1532
Respuesta: jqyery: cursor al salir de una clase

if($(this).text() != ''){

text no es una propiedad, es un método para jquery

pero si tratas de obtener el valor de un input lo mejor es usar .val()
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 04/08/2011, 09:54
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 10 meses
Puntos: 66
Respuesta: jqyery: cursor al salir de una clase

seria asi:

$(this).addClass('texto');

la funcion css, sirve para agregar propiedades especificas a un elemento no para agregar clases.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #4 (permalink)  
Antiguo 04/08/2011, 17:27
 
Fecha de Ingreso: junio-2010
Mensajes: 51
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: jqyery: cursor al salir de una clase

Hola, gracias por las respuestas, pero quizás no me he explicado bien.

El problema, en principio, viene que no detecta el cambio de cursor en la clase "campo_error".

Como trataba de explicar en el último párrafo de mi post, originalmente, en el código html, la clase del campo es "texto"

Código HTML:
Ver original
  1. <input type="text" class="texto" name="IdNombre".. etc.

Compruebo el formulario según el primer código que puse en el post y, mediante javascript cambio la clase a "campo_error", y ahí viene el problema. Si ejecuto el código:

Código Javascript:
Ver original
  1. $('.campo_error').blur(function(){
  2.        alert('Se ha quitado');
  3.  });

no aparece el alert. Sin embargo, si cambio el ejemplo y utilizo la clase "texto", que es la original en el código html sí que funciona.

No tengo problema en comprobar si el campo está vacío y cambiarlo de clase aunque arriba pueda haber algún fallo de sintáxis, sino que el problema viene que no detecta el cambio de foco una vez cambiada la clase "texto" a "campo_error" mediante javascript.

Espero haberme explicado mejor. Gracias una vez más por vuestra paciencia. Un saludo.
  #5 (permalink)  
Antiguo 04/08/2011, 20:41
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 11 años, 10 meses
Puntos: 66
Respuesta: jqyery: cursor al salir de una clase

eso es por que al momento de definir ese evento el elemento al que le colocas la clase todavia no la tiene y por eso no se le asigna el evento, para eso existen las funciones live y delegate quedaria algo asi:

Código Javascript:
Ver original
  1. $('.campo_error').live('blur', function(){
  2.        //lo que quieras hacer
  3.  });
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #6 (permalink)  
Antiguo 05/08/2011, 05:19
 
Fecha de Ingreso: junio-2010
Mensajes: 51
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: jqyery: cursor al salir de una clase

Muchas gracias. Desconocía la función live. He tenido algún problemilla porque no aceptaba todos los eventos con live ya que estaba trabajando con una versión muy antigua de jquery y he tenido que actualizarla.

He cambiado el evento a foucusin, porque me parece más elegante tal como tengo hecho el diseño. Al final lo he dejado así:

Código Javascript:
Ver original
  1. $('.campo_error').live('focusin', function(){
  2.        $(this).removeClass('campo_error');
  3.        $(this).addClass('texto');
  4.  });

Muchas gracias por vuestros aportes. Me ha sido de mucha ayuda y, como siempre, aprendemos un poco más :D

Etiquetas: clase, cursor, javascript, jquery, salir, formulario
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




La zona horaria es GMT -6. Ahora son las 10:08.