Validar contraseñas en dos input con Ajax

MLDGATO · #1 (**permalink**) 20/06/2012, 20:36

Amigos nuevamente vengo a pedir de su ayuda necesito hacer que en un formulario de registro de usuarios al momento de que el usuario escriba su contraseña y la vuelva a escribir en otro input que aparezca un mensaje indicando si lñas dos contraseñas son iguales o si son diferentes. este es el código que tengo:

Primero el HTML

Código HTML:

Ver original<!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=iso-8859-2" />
<title>Registro de Usuarios</title>
<link href="Estilos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validar.js"></script>
</head>
<body>
<div id="Contenedor">
  <form id="form1" name="form1" method="post" action="">
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2" align="center" bgcolor="#B0C4DE" class="redondosSombra"><h1>REGISTRO DE USUARIOS</h1></td>
      </tr>
      <tr>
        <td width="400">&nbsp;</td>
        <td width="400">&nbsp;</td>
      </tr>
      <tr>
        <td><p>
          <label for="nombres">Nombres:</label>
          </p>
          <p>
            <input name="nombres" type="text" class="redondos" id="nombres" size="50" />
        </p></td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td><p>
          <label for="apellidos">Apellidos:</label>
          </p>
          <p>
            <input name="apellidos" type="text" class="redondos" id="apellidos" size="50" />
        </p></td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td><p>
          <label for="email">Email:</label>
          </p>
          <p>
            <input name="email" type="email" class="redondos" id="email" size="50" onkeyup="correo(this.value)" />
        </p></td>
        <td align="center" valign="middle"><span id="ErrorEmail"></span></td>
      </tr>
      <tr>
        <td><p>
          <label for="user">Usuario:</label>
          </p>
          <p>
            <input name="user" type="text" class="redondos" id="user" size="50" onkeyup="usuarios(this.value)" />
        </p></td>
        <td align="center" valign="middle"><span id="ErrorUser"></span></td>
      </tr>
      <tr>
        <td><p>
          <label for="pass">Contrasena:</label>
          </p>
          <p>
            <input name="pass" type="password" class="redondos" id="pass" size="50" onblur="pass1(this.value)" />
        </p></td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td><p>
          <label for="pass2">Repetir Contrasena:</label>
          </p>
          <p>
            <input name="pass2" type="password" class="redondos" id="pass2" size="50" onkeyup="pass2(this.value)" />
        </p></td>
        <td align="center" valign="middle"><span id="ErrorPass"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td align="right"><input name="button" type="submit" class="redondos" id="button" value="Enviar" size="50" /></td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

como ven tengo dos inputs tipo password el primero al hacer onblur llama a una funcion pass1(this.value) y el otro input al hacer onkeyup llama una funcion pass2(this.value)

dichas funciones son las siguientes:

Código Javascript:

Ver originalfunction pass1(pasword1){
        var newpass1;
        if(pasword1.length==0){
            document.getElementById("ErrorPass").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            newpass1=new XMLHttpRequest();
        }else{
            newpass1=new ActiveXObject("Microsoft.XMLHTTP");
        }
         newpass1.onreadystatechange=function(){
            if (newpass1.readyState==4 && newpass1.status==200){
                document.getElementById("ErrorPass").innerHTML=newpass1.responseText;
            }
        }
        
        newpass1.open("GET","pass.php?verificarPass1="+pasword1,true);
        newpass1.send();
}
 
function pass2(pasword2){
        var newpass2;
        if(pasword2.length==0){
            document.getElementById("ErrorPass").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            newpass2=new XMLHttpRequest();
        }else{
            newpass2=new ActiveXObject("Microsoft.XMLHTTP");
        }
         newpass2.onreadystatechange=function(){
            if (newpass2.readyState==4 && newpass2.status==200){
                document.getElementById("ErrorPass").innerHTML=newpass2.responseText;
            }
        }
        
        newpass2.open("GET","pass.php?verificarPass2="+pasword2,true);
        newpass2.send();
}

Ambas funciones envía las variables a pass.php y este es el código:

Código PHP:

Ver original$pass = "";
    $pass2 = "";
    
    if(@$_GET['pasword1']!="" && @$_GET['pasword2']!=""){
        $pass = $_GET['pasword1'];
        $pass2 = $_GET['pasword2'];
        if($pass == $pass2){
            echo "La Contrasena Coincide";
        }else{
            echo "Error No Coincide la Contrasena";
        }
    }

Espero ser entendido muchas gracias.