[SOLUCIONADO] Validar antes de Enviar Formulario

luis2791 · #1 (**permalink**) 25/05/2015, 11:04

Buenas a todos,
Agradezco que me puedan apoyar con mi consulta;
Necesito validar un formulario con ajax, php y mysql... conseguí un ejemplo en la web que hace 90% lo que quiero, pero por ultimo deseo que deshabilite en botón de envió si la información ya existe en la base de datos, es decir; si el ajax dice que el usuario ya existe y que se habilite el envio si no exiten usuarios iguales.

Codigo del index

Código PHP:

 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<link href="css.css" media="screen" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(document).ready(function() {     
    $('#username').blur(function(){ 
         
        $('#Info').html('<img src="loader.gif" alt="" />').fadeOut(1000); 
 
        var username = $(this).val();         
        var dataString = 'username='+username; 
         
        $.ajax({ 
            type: "POST", 
            url: "check_username_availablity.php", 
            data: dataString, 
            success: function(data) { 
                $('#Info').fadeIn(1000).html(data); 
                //alert(data); 
            } 
        }); 
    });               
});  
</script> 
 
</head> 
<?php 
include('dbcon.php');?> 
<body> 
<h1>Live Username Availability Checking using jQuery Ajax and PHP. </h1> 
 
<br clear="all" /> 
 
<form action="index3.php" name="customForm" id="customForm" method="post" onsubmit="return false" enctype="multipart/form-data"> 
 
    <div class="both"> 
        <h4> Elige "jose" o "maria" siendo usuarios que ya existen en base de datos </h4><br clear="all" /><br clear="all" /> 
        <br clear="all" /> 
        <div> 
            <label>Nombre de usuario</label> 
            <input id="username" name="username" type="text" value="" required /> 
            <div id="Info"></div> 
             
            <label>Contraseña</label> 
            <input id="password" name="password" type="password" value="" required /> 
            <input type="submit" name="send" id="send" value="Enviar" 
        </div> 
    </div> 
     
    <br clear="all" /> 
     
</form>

y por aquí la consulta a la base de datos;

Código PHP:

  <?php 
sleep(1); 
include('dbcon.php'); 
if($_REQUEST) 
{ 
    $username     = $_REQUEST['username']; 
    $query = "select * from username_availablity where username = '".strtolower($username)."'"; 
    $results = mysql_query( $query) or die('ok'); 
     
    if(mysql_num_rows(@$results) > 0) // not available 
    { 
        echo '<div id="Error">Usuario ya existente</div>'; 
    } 
    else 
    { 
        echo '<div id="Success">Disponible</div>'; 
    } 
     
}?>

Agradezco su amable ayuda, gracias.

Alexis88 · #2 (**permalink**) 25/05/2015, 11:33

Podrías enviar un objeto con el mensaje y un código que te indique si el usuario existe o no.

Código PHP:

Ver originalif (mysql_num_rows($results) > 0){ 
    echo json_encode(array('codigo' => 1, 'mensaje' => '<div id="Error">Usuario ya existente</div>'));
} 
else{
    echo json_encode(array('codigo' => 2, 'mensaje' => '<div id="Success">Disponible</div>'));
}

Y en el método success:

Código Javascript:

Ver originalsuccess: function(data){
    if (data.codigo === 1){ //Si el código recibido es 1, oculto el botón de envío
        $("#send").hide();
    }
    $('#Info').fadeIn(1000).html(data.mensaje); //Añado el mensaje
}

Y solo te faltaría añadir el atributo dataType al método $.ajax con el valor json ya que lo que recibes es un objeto JSON por parte del archivo PHP.

Código Javascript:

Ver originaldataType: "json"

Saludos

luis2791 · #3 (**permalink**) 25/05/2015, 11:57

Buenas, Gracias por tu respuesta...... hice los cambios que mencionas, pero cuando el campo existe lo desabilita pero así lo deja, que se haría para volverlo habilitar cuando el usuario este disponible? en ese caso?
Agradezco tu tiempo.

Alexis88 · #4 (**permalink**) 25/05/2015, 11:59

Fíjate que usé una condición. Cuando el código es 1, se oculta el botón. Creo que es obvio lo que necesitas hacer para volver a mostrarlo.

luis2791 · #5 (**permalink**) 25/05/2015, 13:37

Muchas gracias por la ayuda me sirvió mucho , y se que era algo elemental pero no manejo ajax. Estoy investigando para saber trabajarlo ya que es una muy buena herramienta para la implementación con base de datos.
Para los que desconocen como me paso le falta este código:

Código PHP:

  success: function(data) { 
                if (data.codigo === 1){ 
                $("#send").hide(); 
                } 
                else { 
                $("#send").show(); 
                } 
                $('#Info').fadeIn(1000).html(data.mensaje); 
                //alert(data); 
            }