Validacion jquery con metodo blur

Citar

Escrito el 19 Jul 2012 05:10 am

Bueno tengo un campo de texto que al desenfocar me sale un mensaje de texto alado de ahi todo bien, el caso es que cuando lo hago por segunda y mas veces, este mensaje se sigue repitiendo alado del mismo mensaje hasta ser infinito. me podrian decir como puedo evitar que se repita y solo tenga el mensaje principal

aqui el codigo:

Código HTML :

<!DOCTYPE html>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Page Title</title>

    <script type="text/javascript">
        var x;
        x=$(document);
        x.ready(inicializar);
     
        function inicializar()
        {
            var x;
            x=$("#nombre");
            x.blur(desenfocar);

        }
        function desenfocar()
        {
            x = $("#nombre");
               
            if(!x.val()){
            x.after("<span class='error'>  campo obligatorio</span>");
            }          
        }
    </script>

</head>
<body>
    <form>
        <input type="text"  id="nombre" />
        <input type="submit" value="enviar" id="enviar" />
    </form>
    
</body>
</html>

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 19 Jul 2012 12:18 pm

Si no entiendo mal, lo que quisiste decir es que los mensajes se van superponiendo en el mismo lugar...
Si es eso, puede ser porque con x=$("#nombre"); tomas solamente el elemento con ese id (me imagino que solo tenes un elemento para cada id), lo que deberías hacer es pasarle el objeto que tiene el blur, como un parámetro a la función desenfocar.
Saludos

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 20 Jul 2012 12:42 am

me ilustras algo de codigo que trato de entender y no entiendo bien lo que dices

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 20 Jul 2012 12:23 pm

A ver, estoy medio dormido todavía pero seria algo así:
En el html

Código HTML :

<form>
        <input type="text"  id="nombre" name="nombre" onblur="checkCampo(this)"/>
        <input type="text"  id="apellido" name="apellido" onblur="checkCampo(this)" />
        <input type="text"  id="email" name="email" onblur="checkCampo(this)" />
        <input type="submit" value="enviar" id="enviar" name="enviar" onblur="checkCampo(this)" />
</form>

En el Js

Código Javascript :

function checkCampop(campo){
var elemento = document.getElementById(campo.id);
    if(!elemento.value()){
        elemento.after("<span class='error'>Campo obligatorio</span>");
        elemento.focus();
    }else{
        /*  llamas a una función para validar los datos  */
    }
}

Si no me equivoco seria algo así...

Pero de todos modos tu pregunta principal no me quedo clara, si es que los mensajes se te superponen en el mismo lugar o si entra en un bucle infinito...

Saludos

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 20 Jul 2012 03:35 pm

a ya veo es javascript sin usar libreria jquery mmm si ya abia visto uno diferente

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 20 Jul 2012 03:55 pm

No me funciona.. donde va campo. id debo colocar la id del campo o lo dejo asi?

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 20 Jul 2012 11:21 pm

si debes usar jquery, yo me equivoque en una parte del codigo
donde dice:
elemento.after("<span class='error'>Campo obligatorio</span>");
es:
$(elemento).after("<span class='error'>Campo obligatorio</span>");

porque after es un método de jquery

anda haciendo debug de la funci{on para ver que es lo que esta mal en el código, usa firebug para firefox o si usas opera ya trae dragonfly

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 21 Jul 2012 04:15 am

No me sale ningun error, pero igual no funciona , no me sale el texto

Código HTML :

<!DOCTYPE html>

<html>
<head>
    
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Page Title</title>
    <script type="text/javascript">
            function checkCampop(campo){
            var elemento = document.getElementById(campo.id);
                if(!elemento.value()){
                    $(elemento).after("<span class='error'>Campo obligatorio</span>");
                    elemento.focus();
                }else{
                    /*  llamas a una función para validar los datos  */
                }
            }
    </script>
</head>

<body>
    <form>
        <input type="text"  id="nombre" name="nombre" onblur="checkCampo(this)"/>
        <input type="text"  id="apellido" name="apellido" onblur="checkCampo(this)" />
        <input type="text"  id="email" name="email" onblur="checkCampo(this)" />
        <input type="submit" value="enviar" id="enviar" name="enviar" onblur="checkCampo(this)" />
</form>
    
</body>
</html>

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 21 Jul 2012 01:19 pm

Hola, si efectivamente como te había dicho, lo escribí medio dormido al código...
Seria así:

Código HTML :

<!DOCTYPE html>

<html>
<head>
    
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Page Title</title>
    <script type="text/javascript">
            function checkCampo(campo){
            var elemento = document.getElementById(campo.id);
                if(elemento.value == ''){
                    $(elemento).after("<span class='error'>Campo obligatorio</span>");
                    $(elemento).focus();
                }else{
                    /*  llamas a una función para validar los datos  */
                }
            }
    </script>
</head>

<body>
    <form>
        <input type="text"  id="nombre" name="nombre" onblur="checkCampo(this)"/>
        <input type="text"  id="apellido" name="apellido" onblur="checkCampo(this)" />
        <input type="text"  id="email" name="email" onblur="checkCampo(this)" />
        <input type="submit" value="enviar" id="enviar" name="enviar" onblur="checkCampo(this)" />
</form>
    
</body>
</html>

No te andaba porque en vez de llamar a la función checkCampo, estaba escrito checkCampop....

Falta hacerle varias cosas como validar y que los mensajes no se repitan, pero desde acá tenes para entretenerte un rato.

Cualquier duda a su disposición my friend.

Saludos

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 22 Jul 2012 09:08 am

Ahora esta igual como lo habia dejado antes se repite y lo que yo queria era que no se repitiera el mensaje.

Que tal este codigo podria servir??

var error = document.getElementById("error")
if (error!=undefined){
error.parentNode.removeChild(error):
}

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 23 Jul 2012 12:11 pm

Hola, el byid no te va a andar poque eso es una clase, pero me parece que lo más efectivo seria que quites el mensaje de error en el onfocus() del input, a la noche te tiro más data.
Saludos

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 23 Jul 2012 03:45 pm

Le dejo este link de una pagina que tiene un formulario de lo que busco

http://jquery.bassistance.de/validate/demo/

ademas el problema es que deje de enviarme repeticiones del mismo mensaje a lado de otro como que se vuelve infinito cada vez que sea efectua el blur con el campo vacio

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 25 Jul 2012 10:11 pm

solucion??

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 27 Jul 2012 02:30 am

Bueno che, tampoco para que me pongas "solucion?", te doy una mano, pero yo también tengo mis tiempos...
A ver si esto te sirve

Código :

<!DOCTYPE html>

<html>
<head>
    
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <title>Page Title</title>
    <script type="text/javascript">
            function checkCampo(campo){
            var elemento = document.getElementById(campo.id);
            var padre = $(elemento).parent();
                if(elemento.value == ''){
               limpiar(padre);   // limpio el error         
               $(elemento).after("<span class='error'>Campo obligatorio</span>");
                }else{
               limpiar(padre); // limpio el error
                }
            }
         
         function limpiar(padre){
            var error = $(padre).children(".error")
            $(error).remove();
         }
         
    </script>
</head>

<body>
    <form>
        <label id="lblnombre"><input type="text"  id="nombre" name="nombre" onblur="checkCampo(this)"/></label>
        <label id="lblapellido"><input type="text"  id="apellido" name="apellido" onblur="checkCampo(this)"  /></label>
        <label id="lblemail"><input type="text"  id="email" name="email" onblur="checkCampo(this)"  /></label>
        <input type="submit" value="enviar" id="enviar" name="enviar"/>
</form>
    
</body>
</html>

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 27 Jul 2012 02:31 am

fijate que agruegue un label en el html para contener los inputs

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 27 Jul 2012 11:48 pm

Gracias, disculpa por lo de "solucion?" es que anda medio desesperado que no encontraba solucion y habia visto ese codigo antes pero pensaba que de otra forma lo podia hacer. Pero gracias me sirvio

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web