Entonces hice una clase en javascript, con estos metodos:
clase Registro
- init (Constructor)
- __checkPass (checkea si el password es seguro o no)
- ajax (Esta funcion se llama siempre que se va escribiendo datos dentro de algun input del form. Le tendria que haber puesto otro nombre para que sea mas claro)
- __checkAll (Checkea que todos los input del form esten ok)
- registrar (aca hace una llamada ajax al archivo php para que registre al usuario en la db)
Bueno el problema, es que cuando yo instancio el objeto, instancio estos atributos por defecto en false. Esto se ponen en true, si la llamada ajax cada ves que se va completando el formulario da ok. Hasta aca muy bien.
Pero cuando el usuario hace click en el boton de registrar, el valor de estos atributos siempre queda en false, por mas que le cambie el valor a true cuando la llamada ajax da ok, es como que no lo retiene ese valor, y siempre queda en false.
Aca dejo el codigo que estoy usando:
signup.html
Código:
class.js $(function(){
var registro = new Registro();
$("#usuario").keyup(function(){ registro.ajax(1, 'username'); });
$("#nombre").keyup(function(){ registro.ajax(3, 'firstname'); });
$("#apellido").keyup(function(){ registro.ajax(4, 'lastname'); });
$("#password").keyup(function(){ registro.ajax(5, 'pass'); });
$("#email").keyup(function(){ registro.ajax(2, 'mail'); });
$("#pais").keyup(function(){ registro.ajax(6, 'country'); });
$("#join").click(function(){
alert(registro.usuario); //Esto siempre me devuelve false
});
});
Código:
Registro.jsvar Class = function(current,previous){
// Comprobamos si tenemos una Class que extender.
previous = typeof previous == 'undefined' ? {} : previous.prototype;
// Extendemos con las propiedades de la Class anterior
for(p in previous){
// Si no existe la propiedad la añadimos
if(typeof current[p] == 'undefined') current[p] = previous[p];
// Si es una función
else if(typeof previous[p] == 'function'){
// añadimos this.parent() a la función de la Class actual.
current[p] = (function(tmp){
var _parent = function(){
this.parent = _parent.parent;
return tmp.apply(this, arguments);
}
return _parent;
})(current[p]);
// Igualamos this.parent() al método de la Class anterior.
current[p].parent = previous[p];
}
}
// Construimos el contenedor
var construct = function(){
if(this.init) this.init.apply(this,arguments);
}
// Le aplicamos los métodos extendidos
construct.prototype = current;
// asignamos un constructor
construct.constructor = Class;
//Devolvemos el constructor.
return construct;
}
Código:
Resumiendo:var Registro = new Class(
{
init:function()
{
this.usuario = false;
this.nombre = false;
this.apellido = false;
this.password = false;
this.email = false;
this.pais = false;
this.nacimiento = false;
},
__checkPass:function(valor)
{
score = 0;
score += valor.length * 2.5;
if (valor.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;}
if (valor.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;}
if (valor.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){ score += 10;}
if (valor.match(/([a-zA-Z])/) && valor.match(/([0-9])/)){ score += 15;}
if (valor.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && valor.match(/([0-9])/)){ score += 15;}
if (valor.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && valor.match(/([a-zA-Z])/)){score += 15;}
if (valor.match(/^\w+$/) || valor.match(/^\d+$/) ){ score -= 5;}
if ( score < 0 ){score = 0;}
if ( score > 100 ){ score = 100;}
return (score < 25) ? false : true;
},
// Method Ajax (Check if form is ok)
ajax:function(tipo, idvalidador)
{
var $peticion;
var $valor;
var $ajax = true;
var $error;
switch(tipo)
{
case 1:
$var = "usuario";
$peticion = "index.php?controller=ajax&action=usuario";
$valor = $("#usuario").val();
$error = "Su usuario no es válido o ya existe un usuario con ese nick";
break;
case 2:
$var = "email";
$peticion = "index.php?controller=ajax&action=email";
$valor = $("#email").val();
$error = "Su email no es válido o es utilizado por otra persona";
break;
case 3:
$var = "nombre";
$ajax = false;
$valor = $("#nombre").val();
$error = "Tiene que completar con su nombre";
break;
case 4:
$var = "apellido";
$ajax = false;
$valor = $("#apellido").val();
$error = "Tiene que completar con su apellido";
break;
case 5:
$var = "password";
$ajax = false;
$valor = $("#password").val();
$error = "El password tiene que tener mas de 3 caracteres";
break;
case 6:
$var = "pais";
$ajax = false;
$valor = $("#pais").val();
$error = "Tiene que completar el pais en el que vive";
break;
case 7:
$var = "nacimiento";
$ajax = false;
// ----------------------------
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
// ----------------------------
$error = "Tiene que completar la fecha de nacimiento";
break;
}
//endswitch;
var msgOk = "<div class='formOk'><img src='template/default/images/tick-small.png' />Ok</div>";
var msgError = "<div class='formError'><img src='template/default/images/cross-small.png' />" + $error + "</div>";
if ($ajax)
{
// Ajax request
$.post($peticion, { input: $valor },
function(data)
{
if (data=="ok")
{
$("#" + idvalidador).html(msgOk);
eval('this.' + $var + ' = true');
}
else {
$("#" + idvalidador).html(msgError);
eval('this.' + $var + ' = false');
}
alert("this." + $var + " = " + this.usuario);
// Aca siempre me devuelve true (en caso que este todo ok)
});
// End Ajax request
}
else {
if ($var=="nacimiento")
{
if (day!="dia" && month!="mes" && year!="anio")
{
eval('this.' + $var + ' = true');
$("#" + idvalidador).html(msgOk);
}
else {
eval('this.' + $var + ' = false');
$("#" + idvalidador).html(msgError);
}
}
else {
if ($valor.length > 3)
{
eval('this.' + $var + ' = true');
$("#" + idvalidador).html(msgOk);
if ($var=="password")
{
// Check if is secure password
if (this.__checkPass($valor))
{
$("#" + idvalidador).html("<div class='formOk'> <img src='template/default/images/tick-small.png' /> <font color='#04B404'><b>Su contraseña es segura</b></font></div>");
}
else {
$("#" + idvalidador).html("<div class='formOk'> <img src='template/default/images/tick-small.png' /> <font color='#F78181'><b>Su contraseña es bastante insegura</b></font></div>");
}
}
}
else {
eval('this.' + $var + ' = false');
$("#" + idvalidador).html(msgError);
}
}
}
},
__checkAll:function()
{
this.ajax(1, 'username');
this.ajax(2, 'mail');
this.ajax(3, 'firstname');
this.ajax(4, 'lastname');
this.ajax(5, 'pass');
this.ajax(6, 'country');
this.ajax(7, 'datenac');
},
registrar:function()
{
alert(this.usuario);
this.__checkAll();
if (this.usuario && this.email && this.nombre && this.apellido && this.password && this.pais && this.nacimiento)
{
alert("Registro")
}
else {
if (!this.nacimiento){ $("#year").focus(); }
if (!this.pais){ $("#pais").focus(); }
if (!this.email){ $("#email").focus(); }
if (!this.password){ $("#password").focus(); }
if (!this.apellido){ $("#apellido").focus(); }
if (!this.nombre){ $("#nombre").focus(); }
if (!this.usuario){ $("#usuario").focus(); }
}
}
});
El problema es que cuando esta llamada por ejemplo:
$("#usuario").keyup(function(){ registro.ajax(1, 'username'); });
Da true, no cambia el valor del atributo:
this.usuario = false;
La verdad que esto se me esta convirtiendo en un dolor de cabeza por eso lo posteo.
