Hola a todos!
Bueno basicamente quería pedir ayuda, tengo un problema con un par de javascripts que estoy tratando de implementar en un formulario.
Se trata de uno que revisa que los campos no esten vacios, que tengan un largo minimo, que coincidan las contraseñas, etc.
Y otro que revisa la base de datos para ver si el usuario ya existe, y avisa en tiempo real.
Cada uno por separado funciona impecable, pero al tratar de juntarlos, el primero deja de funcionar.
Adjunto los codigos correspondientes:
Validador de campos
Code:
<html>
<head>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript" src="validation.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body background="images/canvas_10.png" style="background-attachment: fixed" >
<center>
<table>
<tr>
<td colspan="2"><center>
<img src="images/reg.png">
</center></td>
</tr>
<tr>
<td>
<form id="test" action="users/registro.php" method="POST">
<div align="right" class="field-widget">Nombre de Usuario: <input name="username" id="username" class="required" title="Nombre de Usuario"></div>
<div align="right" class="field-widget">Contraseña: <input type="password" name="pass" id="pass" class="required validate-password" title="Ingresa una contraseña de 5 o mas caracteres." /></div>
<div align="right" class="field-widget">Confirmar Contraseña: <input type="password" name="cpass" id="cpass" class="required validate-password-confirm" title="Confirma la contraseña." /></div>
<div align="right" class="field-widget">Nombre: <input name="nombre" id="nombre" class="required" title="Nombre completo." /></div>
<div align="right" class="field-widget">Correo: <input name="email" id="email" class="required validate-email" title="Ingresa tu correo." /></div>
<div align="right" class="field-widget">Carrera: <input name="carrera" id="carrera" class="required" title="Ingresa tu carrera." /></div>
</td>
</tr>
<tr>
<td colspan="2"><center>
<input type="submit" value="Crear Usuario!" />
</form>
<script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
Validation.addAllThese([
['validate-password', 'La contraseña debe ser de 5 o mas caracteres, diferente de \'password\' y de tu usuario', {
minLength : 5,
notOneOf : ['password','PASSWORD','1234567','0123456'],
notEqualToField : 'username'
}],
['validate-password-confirm', 'Las contraseñas no coinciden!', {
equalToField : 'pass'
}]
]);
</script>
</center></td>
</tr>
</table>
</center>
</body>
</html>
Chequeo disponibilidad de usuario
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fancy Style Username availability Checking using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;
}
.messageboxerror{
position:absolute;
width:auto;
margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}
</style>
</head>
<body>
<div >
User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
</body>
</html>
Como les decia, independientemente funcionan impecable, pero al tratar de juntarlos deja de funcionar el primero.
Para juntarlos, lo que hago es meter todo lo que corresponde al chequeo de disponibilidad entre los tags <head> y </head> de la pagina, y agrego el msgbox luego del campo que quiero que se valide.
Ojala alguien me pueda ayudar!!
Saludos, y gracias de antemano
2 Javascripts Funcionan Separados, Pero Juntos NO!
