primer plugin

oms02 · #1 (**permalink**) 28/05/2011, 17:16

Hola a todos. Estoy en la creacion de mi primer plugin y como imaginareis, me hago lios...

El codigo en si es muy sencillo, pero no se pq no funciona. creo que es debido a los problemillas de conceptos...

me echais un cable??

Código Javascript:

Ver original$.fn.validaRegistro = function (mensaje) {
    $(this).each(function() {
        var pos = $(this).position();
        var veloc2 = 1000;
        var nombre = $("#nombre");
        var veloc = 600;
        var c_valido = "silver";
        var c_error = "#FF8B8F";
        
        function error(mensaje){
            $(this).css({border:'2px solid red'});
            $(this).animate({backgroundColor: c_error},veloc);
            var div = "<div class='tooltip-registro'>" + mensaje + "</div>";
            $(this).after(div);
            
            var posLeft = pos.left + $(this).width();
            var posTop = pos.top;
            $(this).next().css({"top": posTop + "px","left": posLeft + "px","position": "absolute"});
        }
        
        function valido(){
            $(this).css({border:'2px solid #000'});
            $(this).animate({backgroundColor: c_valido},veloc);
            $(this).next().fadeOut(veloc2);
        }
        
        function validaNombre(){
            if(nombre.val().length < 4 || nombre.val().length > 15)
                {error(mensaje);}
            else if(!$(this).val().match(/^[0-9a-zA-Z]+$/))
                {error(mensaje);}
            else
                {valido();}
        }
 
$(this).focusin(function(){$(this).next().fadeOut(veloc2);});
$(this).blur(validaNombre);
        
});
}

Código HTML:

Ver original$(document).ready(function(){
<script language="javascript" type="text/javascript">
$("#nombre").validaRegistro("El nombre solo puede contener letras y numeros. Debe tener entre 4 y 15 caracteres");
</script>
});

Gracias!

InKarC · #2 (**permalink**) 28/05/2011, 17:57

Ese no es realmente el html; y solo lo copiaste mal cierto?

oms02 · #3 (**permalink**) 28/05/2011, 18:03

Si. me equivoque

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<script src="../plugins/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="registro.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
 
$("#nombre").validaRegistro("El nombre solo puede contener letras y numeros. Debe tener entre 4 y 15 caracteres");
 
});
</script>
 
        <div>
            ...
            <label for="nombre">Nombre</label>
            <input type="text" id="nombre" name="usuario" size="22"/>
            ...
        </div>
 
</html>

caricatos · #4 (**permalink**) 28/05/2011, 18:20

Hola:

¿A qué llamas "plugin"...?

No habrás querido decir función o tal vez script...

Deberías comentar qué pretendes con tu código.

Saludos

masterpuppet · #5 (**permalink**) 28/05/2011, 18:26

Cita:

Iniciado por caricatos

Hola:

¿A qué llamas "plugin"...?

No habrás querido decir función o tal vez script...

Deberías comentar qué pretendes con tu código.

Saludos

Es un plugin para jQuery, un validator

oms02 · #6 (**permalink**) 28/05/2011, 18:28

Cita:

Iniciado por caricatos

Hola:

¿A qué llamas "plugin"...?

Creia que a esto:

Código Javascript:

Ver original$.fn.validaRegistro = ...

Lo que quiero es que aparezca y desaparezca el div tras ejecutar la funcion de validacion. Se trata de un tooltip de validacion para un formulario.

oms02 · #7 (**permalink**) 29/05/2011, 17:45

Lo he modificado un poco, pero sin llegar a funcionar bien.

Código Javascript:

Ver original$.fn.validaRegistro = function (tipo) {
    $(this).each(function() {
        var pos = $(this).position();
        var veloc2 = 800;
        var nombre = $("#nombre");
        var clave = $("#clave");
        var veloc = 600;
        var mensaje = "";
 
        function error(mensaje){
            $(tipo).css({borderColor:'#FF0000'});
 
            var posLeft = pos.left + $(tipo).width() +15;
            var posTop = pos.top -5;
            var div = "<div class='tooltip-registro'>" + mensaje + "</div>";
            $(tipo).after(div);
            $(tipo).next().css({"top": posTop + "px","left": posLeft + "px","position": "absolute"});
            return false;
        }
 
        function valido(){
            $(tipo).css({borderColor:'#FFF'});
        }
 
        function validaNombre(){
            if(nombre.val().length < 4 || nombre.val().length > 15) {
                mensaje = 'El nombre debe tener entre 4 y 15 carácteres.';
                error(mensaje);
            }
            else if(!(nombre.val().match(/^[0-9a-zA-Z]+$/))) {
                mensaje = 'El nombre sólo puede contener letras y números.';
                error(mensaje);
            }
            else
                {valido();}
        }
 
        function validaClave(){
            if(clave.val().length < 6 || clave.val().length > 15) {
                mensaje = 'La clave debe tener entre 4 y 15 carácteres.';
                error(mensaje);
            }
            else if(!(clave.val().match(/^[0-9a-zA-Z]+$/))) {
                mensaje = 'La clave sólo puede contener letras y números.';
                error(mensaje);
            }
            else
                {valido();}
        }
 
$(this).focusin(function(){
    $(this).next(".tooltip-registro").fadeOut(veloc2);
    $(this).css({borderColor:'#FFFF00'});
});
 
nombre.focusout(validaNombre);
clave.focusout(validaClave);
        
});
}

Código HTML:

Ver original<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#nombre").validaRegistro("#nombre");
$("#clave").validaRegistro("#clave");
});
</script>

Se ejecuta sobre los 2 divs a la vez...

alguien me puede decir como modificarlo??

InKarC · #8 (**permalink**) 29/05/2011, 20:36

Si ya esta en este nivel de javascript ya debería poder identificar que partes "no funcionan bien" haciendo uso de alerts y quitando partes para ver cual es la que tiene problemas.

oms02 · #9 (**permalink**) 30/05/2011, 17:35

Ok. Creo q ya se por donde iban los tiros.
Muchas gracias.