Ayuda Urgente, Con SexyLogin Lightbox Ajax

moz90 · #1 (**permalink**) 07/05/2010, 13:43

Amigos Foreros espero me puedan ayudar implemente este login sexy a mi web,

http://www.coders.me/web-html-js-css...sexy-login-box

pero este mismo efecto le quise aplicar a la parte de registro de usuarios, pero en la validación cuando quise validar y agregar mas sentencias en el script para que me muestre mas mensaje de error por ejemplo: para que verificara cuando las contraseñas no coiciden y me muestre otro msj de error, carga todo bien, me muestra el msj de error pero cuando le doy en "Desea intentar de Nuevo" no regresa al formulario se qeda ahi, aqui les dejo el codigo completo, espero me puedan ayudar amigos es urgente....les dejo el codigo completo para que lo apliquen ustedes:

Archivo: registro.html

Código:

<div class="logo">
  <div align="center"><img src="images/logologin2.png" width="300" height="71" /></div>
</div>
<div id="Sexy-login" class="login">
  <form action="registrando.php" method="post" id="loginform">
     <table width="311" height="191" border="0">
    <tr>
      <td height="28" colspan="2"><div align="left">Crear un NickName y una contraseña para acceder a nuestro Sistema.</div></td>
    </tr>
    <tr>
      <td width="129" height="33">Nick(*)</td>
      <td width="172"><label>
        <input name="usuario" type="text" id="usuario" maxlength="7" />
      </label></td>
    </tr>
    <tr>
      <td height="30">Contraseña (*):</td>
      <td><label>
        <input type="password" name="pass1" id="pass1"/>
      </label></td>
    </tr>
     <tr>
      <td height="30">Confirmar Contraseña (*):</td>
      <td><label>
        <input type="password" name="pass2" id="pass2"/>
      </label></td>
    </tr>
    <tr>
      <td height="30">Correo Electronico</td>
      <td><label>
        <input type="text" name="email" id="email"/>
      </label></td>
    </tr>
     <tr>
      <td height="30" colspan="2"><div align="left">Por favor, escriba algunos datos sobre usted:</b><br />
           </div></td>
    </tr>
    <tr>
      <td height="30">Apellido Materno(*)</td>
      <td><label>
        <input type="text" name="apm" />
      </label></td>
    </tr>
    <tr>
      <td height="30">Apellido Paterno (*)</td>
      <td><label>
        <input type="text" name="app" />
      </label></td>
    </tr>
    <tr>
      <td height="30">Nombre (*)</td>
      <td><label>
        <input type="text" name="nombre" />
      </label></td>
    </tr>
    <tr>
      <td colspan="2"><div align="center">
          <input type="submit" class="submit" name="submit" id="submit" value="Registrarse" onclick="return SexyLoginInit();" />
      </div></td>
    </tr>
  </table>
    </form>
     
     
</div>

<div id="Sexy-loading" class="login loading" style="display:none;">
Cargando...
</div> 

<div id="Sexy-error" class="login error" style="display:none;">
Verifique Sus Datos, ingreso un campo erroneo. <br /><a href="#" id="again">¿Deseas volver a intentarlo?</a>
</div>

<div id="Sexy-error-a" class="login error" style="display:none;">
Las Contraseñas no coiciden.<br /><a href="#" id="agains">¿Deseas volver a intentarlo?</a>
</div>

<script type="text/javascript">
var Sexy_FirstTime = 0;

function SexyLoginInit()
{
  if (Sexy_FirstTime) {
    $('loginform').send();
    return false;
  } else {
    Sexy_FirstTime = 1;
  }
  
  $('again').addEvent('click', function(event) {

    event.stop();
    $('Sexy-error-a').setStyle('display', 'none');
	$('Sexy-error').setStyle('display', 'none');
	$('Sexy-loading').setStyle('display', 'none');
    $('Sexy-login').setStyle('display', 'block');

  });

  $('loginform').set('send', {

    onRequest: function() {
      $('Sexy-loading').setStyle('display', 'block');
      $('Sexy-login').setStyle('display', 'none');
    },
      
    onComplete: function(response) {
      $('Sexy-loading').setStyle('display', 'none');
      if (response == "OK!")
      {
        document.location.href = "index.html";
      }
      else if (response == "NO!")
      {
        $('Sexy-error').setStyle('display', 'block');
      }
	  else if (response == "NOS!")
      {
        $('Sexy-error-a').setStyle('display', 'block');
      }
      else
      {
        $('Sexy-login').setStyle('display', 'block');
      }
  }});
  $('loginform').send();
  return false;
};
</script>

Archivo: registrando.php

Código PHP:

  <?PHP 
//Comprobar que nos envien las variables 
if(!(empty($_POST["usuario"])&& empty($_POST['pass1']) && empty($_POST['pass2']) && empty($_POST['nombre']) && empty($_POST['app']) && empty($_POST['apm']) && empty($_POST['email'])) ) 
{ 
  sleep(2); //only for debug 
   
      include("config.php"); /*Traemos el archivo config*/ 
    /*Recibimos las variables por el metodo POST*/ 
    $login = htmlspecialchars(trim($_POST['usuario'])); 
    $pass1 = trim($_POST['pass1']); 
    $pass2 = trim($_POST['pass2']); 
    $nombre= htmlspecialchars(trim($_POST['nombre'])); 
    $apaterno= htmlspecialchars(trim($_POST['app'])); 
    $amaterno= htmlspecialchars(trim($_POST['apm'])); 
    $email = htmlspecialchars(trim($_POST['email'])); 
    /*Hacemos la consulta */ 
    $link=mysql_connect($server,$dbuser,$dbpass); 
    mysql_select_db($database,$link); 
    $query = sprintf("SELECT datosuser.usuario FROM datosuser WHERE datosuser.usuario='%s'",  // Ahora 
    mysql_real_escape_string($login));  
    $result=mysql_query($query); 
   //Super rutina de seguridad para la comprobación de usuarios 
     if(mysql_num_rows($result)){ 
      echo "NO!"; 
      //print "<meta http-equiv=Refresh content=\"3 ; url=../index.html\">";  
    } 
    else{ 
    mysql_free_result($result); 
    /* Ahora comprovamos que los dos pass coinciden */ 
      if($pass1!=$pass2) { 
      [B]echo "NOS!";[/B] 
      //echo "Los passwords deben coincidir"; 
     } 
    else { 
 
    $pass1=sha1(md5($pass1)); // Ahora 
  
    $query  =  sprintf("INSERT INTO isur_datosuser (NameUser, ApPatUser, ApMatUser, EmailOneUser, usuario, clave) VALUES ('%s','%s','%s', '%s','%s','%s')", mysql_real_escape_string($nombre), mysql_real_escape_string($apaterno), mysql_real_escape_string($amaterno),  mysql_real_escape_string($email), mysql_real_escape_string($login), mysql_real_escape_string($pass1)); 
 
    $result=mysql_query($query); 
    //echo "OK!"; 
    if(mysql_affected_rows()){ 
    echo "OK!";             
    //echo "Usuario Registrado correctamente, Ahora puedes logearte. En Breve Seras Redirrecionado a la pagina principal, Gracias"; 
    //print "<meta http-equiv=Refresh content=\"2 ; url=../index.html\">";  
 
    } 
     
     
    } 
     
    //echo "OK!"; //Dato clave, de esto depende el Formulario AJAX 
  } 
   
} 
//elseif ((bool) $_GET['exito']) 
//{ 
 // echo "Logueado correctamente."; 
//} 
else 
{ 
  include("registro.html"); 
} 
?>

Archivo: index.html, con este archivo invocamos al formulario lightbox

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sexy Login Box - www.coders.me</title>
<link rel="stylesheet" href="global.css" type="text/css" media="all" />
<style type="text/css">
.login {
width: 238px;
/*margin: 0 auto;*/
padding:20px 0 0 25px;
/*background: url(images/user.png) no-repeat left center;*/
}

.logo{

padding:13px 0 0 2px;
}

.login label {
display:block;
font-size:12px;
padding-bottom:5px;
text-align:right;
}

.login label em{
width:80px;
display:block;
float:left;
font-style: normal;
}

.login input {
width:146px;
height:22px;
border:1px solid #ccc;
}

.login input.submit {
width:auto;
height:auto;
border:1px solid #ccc;
float:right;
}

.loading {
text-align: center;
width: 238px;
margin: 0 auto;
padding:40px 0;
background: url(images/ajax-loader.gif) no-repeat center 60px;
}

.error{
margin: 0 auto;
padding:20px 0 20px 55px;
width:212px;
background: url(images/dialog-error.png) no-repeat left center;
}


</style>
<script src="mootools.js"     type="text/javascript"></script>
<script src="sexylightbox.packed.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

<script type="text/javascript">
  window.addEvent('domready', function(){
    new SexyLightBox({OverlayStyles: {'background-color': '#000000'}});
  });
</script>

</head>

<body>
<a href="registro-ucsur.php?height=525&width=400" rel="sexylightbox" >Registrarse</a></p>
</body>
</html>

Nota lo que esta en negro fue lo que quise agregar para q me muestre mas msj de error.

espero sus rpta