Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/04/2014, 06:54
OoMATYoO
 
Fecha de Ingreso: julio-2013
Mensajes: 11
Antigüedad: 11 años, 3 meses
Puntos: 0
validacion de campos con jquery y ajax en tiempo real

Amigos del foro, necesito su ayuda por favor, estoy a un paso de lograr que funcione un codigo, pero mientras mas cerca estoy mas dificil es, ya no se que hacer por eso recurro a sus conocimientos....

la cosa va asi. Tengo un boton que al apretarlo me abre un modal y me muestro dentro de el un formulario con los campos "nombre y apellido, nombre de usuario, contraseña, repetir contraseña y email y terminos de uso" hasta ahi todo bien, ahora viene el unico problema, a dichos campos mencionados anteriormente tengo un jquery validate que los verifica a todos los campos por si estan vacios o con un minimo de carcateres, etc, eso anda todo y muestra los carteles de error al querer enviar el formulario, ahora el problema que aparte de ese codigo tengo otro jquery que me hace una consulta en tiempo real con ajax a la base de datos preguntando si el nombre de usuario que se ingreso en dicho casillero ya existe y me muestre un cartel de ocupado o disponible en el caso que no exista. Que tambien anda bien pero la cosa es que si tengo todo el formulario lleno y cumple todas las condiciones de el jquery validate lo manda el formulario pero pasa que si tengo el nombre de usuario ya existente y apreto el boton de enviar tambien me envia los datos igual, sin anteriormente devolverme un "False" o algo por el estilo que no me deje avanzar, es lo unico que me falta es solo una condicion. yo se que quizas sea facil pero a mi no me sale..... sin mas vueltas aca les dejo los 2 jquery para que vean. Desde ya muchas gracias


//este es la galeria jquery....
<script src="jquery-1.4.3.min.js"></script>



ESTE SCRIPT ES PARA TRAER LOS RESULTADOS DE BUSQUEDA DEL CAMPO NICK (OSEA NOMBRE DE USUARIO) QUE SE INGRESARON.

Cita:
<script>
$(document).ready(function(){

var consulta;

//hacemos focus
$("#nick").focus();

//comprobamos si se pulsa una tecla
$("#nick").keyup(function(e){
//obtenemos el texto introducido en el campo
consulta = $("#nick").val();

//hace la búsqueda
$("#resultado").delay(1000).queue(function(n) {


$.ajax({
type: "POST",
url: "vef.php",
data: "nick="+consulta,
dataType: "html",
error: function(){
alert("error petición ajax");
},
success: function(data){



if(data == 1)

{
$("#resultado").html(data);
n();


//este true no me anda
return true;
}

else{

$("#resultado").html(data);
n();

// este false no me anda

return false;
}

}
});

});

});

});
</script>


DESPUES TENGO ESTE SCRIPT PARA VALIDAR TODOS LOS CAMPOS.

Cita:
<script type="text/javascript">
$(document).ready(function() {
$("#ok").hide();

var usuarioValido;
$.validator.addMethod("regex",function(value,eleme nt,regexp){
var re= new RegExp(regexp);
return this.optional(element) || re.test(value);
},"Solo caracteres alfanumericos");



$("#formulario").validate({
rules: {
clave1: { required: true, minlength: 6 },
clave2: { required: true, minlength: 6, equalTo: "#clave1"},
nick: { required: true, minlength: 6, regex:"^[a-zA-Z0-9_]+$" },
nombre: { required: true, minlength: 2},
email: { required:true, email: true},

agree: {required: true}
},

messages: {
clave1: { required: "Por favor, introduzca su password", minlength: "Su clave debe tener mas de 6 caracteres" },

clave2: { required: "Por favor, introduzca de nuevo su password", minlength: "Su clave debe tener mas de 6 caracteres", equalTo: "Las password introducidas no son iguales" },

nick: { required: "Por favor, introduzca su nombre de usuario", minlength: "El usuario debe tener mas de 6 caracteres" },

nombre: "Debe introducir su nombre y apellido.",

email: "Debe introducir un email válido.",

agree: "Acepte nuestros Terminos de uso."
}


});

});

</script>


Y ESTE ES LA PAGINA QUE HACE LA CONSULTA DEL NOMBRE DE USUARIO QUE SE INGRESO........LA PAGINA SE LLAMA VEF.PHP



Cita:
<style>

a.Ntooltip {
position: relative; /* es la posición normal */
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:none; /* DEBE haber un color de fondo */
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {

background-color:#F42B3F;
border:2px solid #c14e02;

margin:10px auto;
padding:5px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
color: white;
display: block; /* se fuerza a mostrar el bloque */
top:-3.2em; left:-14em; /* donde va a estar */

}



a.Ntooltip1 {
position: relative; /* es la posición normal */
}

a.Ntooltip1:hover {
z-index:999; /* va a estar por encima de todo */
background-color:none; /* DEBE haber un color de fondo */
}

a.Ntooltip1 span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip1:hover span {

background-color:#FA871F;
border:2px solid #c14e02;
width:250px;
margin:10px auto;
padding:5px;
position:absolute;
text-align:center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
color: white;
display: block; /* se fuerza a mostrar el bloque */
top:-3.2em; left:-11em; /* donde va a estar */

}





a.Ntooltip2 {
position: relative; /* es la posición normal */
}

a.Ntooltip2:hover {
z-index:999; /* va a estar por encima de todo */
background-color:none; /* DEBE haber un color de fondo */
}

a.Ntooltip2 span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip2:hover span {

background-color:#24B14D;
border:2px solid #21A548;
width:150px;
margin:10px auto;
padding:5px;
position:absolute;
text-align:center;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
color: white;
display: block; /* se fuerza a mostrar el bloque */
top:-3.2em; left:-5em; /* donde va a estar */

}

</style>

<?php

function contar_cadena($cadena){
$longitud = strlen($cadena);
return $longitud;
}

include("conect.php");

$nick=strip_tags($_REQUEST['nick']);

$sql=@mysql_query('SELECT * FROM usuarios WHERE usuario="'.mysql_real_escape_string($nick).'"');

$total=mysql_num_rows($sql);

$cadena = $nick;
$longitud = contar_cadena($cadena);

if($longitud==0){


}else{

if($longitud<6){


}else{


if($total==0)
{
// Ese nick esta libre
echo "<a class='Ntooltip2' href='#'>
<img src='tilde.png' width='20' style='margin-top:-10px;left: 50%;top: 50%;' title>
<span>
Usuario Disponible
</span>
</a>";
echo 0;
}
else
{
// El usuario existe en la Base de Datos
echo "<a class='Ntooltip1' href='#'>
<img src='ocupado.png' width='20' style='margin-top:-10px;left: 50%;top: 50%;' title>
<span>
Usuario ocupado o no disponible
</span>
</a>";
echo 1;
}
}
}
?>