Verificar disponibilidad de un nombre de usuario con PHP, jQuery y MySql

Que tal, en esta ocasión vamos a ver como crear un script que nos permita verificar si un nombre de usuario esta disponible, similar a el que nos aparece cuando nos registramos en google, hotmail o cualquier otro servicio en internet, que nos pide un nombre de usuario y verifica si esta disponible antes de pasar al siguiente paso. ¿Que vamos a utilizar? bueno lo vamos a crear con PHP, jQuery y MySQL.

Comenzamos con el codigo HTML del formulario de registro, solo voy a colocar dos cajas de texto para la demostracion, no voy a crear el formulario completo.

<form id="frmRegistro">
    <label> Nick: </label>
    <input type="text" id="nick" name="nick"/><div id="msgUsuario"></div>
    <label> Nombre: </label> <input type="text" id="nombre" name="nombre"/>
</form>

Una vez que ya creamos el formulario HTML, el siguiente paso será crear el codigo jQuery para verificar la disponibilidad del nombre de usuario. Para ello vamos a utilizar el evento focusout de la caja de texto nick, la petición se hará mediante ajax y lo que vamos a enviar solamente es el nick para verificar si ya existe en nuestra base de datos.  Antes de que la petición sea enviada al servidor se coloca una imagen y el texto verificando al lado de la caja de texto del nick para que el usuario sepa que se esta realizando una acción. Al final dependiendo de la respuesta del servidor se escribirá Disponible o no disponible.

$('#nick').focusout( function(){
    if($('#nick').val()!= ""){
        $.ajax({
            type: "POST",
            url: "validar.php",
            data: "nick="+$('#nick').val(),
            beforeSend: function(){
              $('#msgUsuario').html('<img src="loader.gif"/> verificando');
            },
            success: function( respuesta ){
              if(respuesta == '1')
                $('#msgUsuario').html("Disponible");
              else
                $('#msgUsuario').html("No Disponible");
            }
        });
    }
});

Por ultimo el codigo php es el siguiente: se realiza la conexion con la base de datos, se almacena en una variable el nick que se va a verificar, se realiza la consulta y dependiendo del resultado se devuelve 0 cuando el nombre de usuario ya existe y 1 cuando esta disponible.

<?php
    $conexion= new mysqli('servidor','usuario','contrasenia','baseDatos');
    $nick = $_POST["nick"];
    $consulta = "select nick from usuario where nick = '$nick";
    $result = $conexion->query($consulta);

    if( $result->num_rows > 0)
        echo 0;
    else
        echo 1;
?>

Eso es todo espero que les ayude, no olviden comentar.

43 comentarios en “Verificar disponibilidad de un nombre de usuario con PHP, jQuery y MySql”

  1. tironemota dice:

    Estoy muy interesado en lograr la verificación de usuario existente, pero no logro que me funcione, agradeceria si puedes pasarme el codigo completo, ya que no se que esta mal.

    1. denker dice:

      Hola amigo, esta publicado todo el código, te marca algun error? ya revisaste tus consultas que esten bien escritas?

  2. luydjmix dice:

    te falta mostrar en que parte va el jquerry///
    mi segunda pregunta es si yo ya tengo una conexion como quedaria
    el nonbre de la conexion es validar.php

    1. denker dice:

      El codigo jquery lo colocas dentro de head y recuerda que debes utilizar

      $(document).ready(function(){

      codigo

      });

  3. Alex dice:

    muchas gracias por este script, me funcionó perfecto.

  4. uriel dice:

    Hola, que puedo hacer si quiero que la petición se mande cada que presiono una tecla?

    1. denker dice:

      Hola, puedes trabajar con el evento .keypress()

  5. freddy dice:

    Hola no me captura el valor enviado en la variable respuesta siempre me ejecuta el else a ques e puede deber esto, no hay que usar la palabra return en el php vasta con usar un echo
    ayuda porfa gracias

  6. freddy dice:

    Si le pongo que solo imprima un mensaje si funciona pero al recibir un parametro no ya que necesito que si no esta disponible que limpie el control para ques e intente otra vez
    si me puedes ayudar por favor te lo agradeseria

    1. denker dice:

      Hola Freddy, si con el echo basta para que regrese la respuesta, si necesitas borrar la caja de texto si el usuario ya existe ese código lo tendrías que poner en el else de respuesta

      if(respuesta == '1')
      $('#msgUsuario').html("Disponible");
      else{
      $('#msgUsuario').html("No Disponible");
      $('#control').val('');
      }

      1. freddy dice:

        AMIGO GRACIAS POR LA RESPUESTA SI EFECTIVAMENTE HICE ESO Y SIEMPRE LA RESPUESTAS E VA AL ELSE OSEA LA NO DISPONIBLE YA VERIFIQUE QUE LA RESPUESTA ME DA 1 AL CONTAR LOS REGISTROS ESTE ES MI CODIGO EN QUE ME EQUIVOQUE NO LOGRO AHCER CORRER LA APLICACION SIEMPRE SE VA AL ELSE POR MAS QUE LA RESPUESTA ES 1
        GRACIAS

        $(document).ready(function(){

        $(‘#idarea’).blur(function() {
        if($(‘#idarea’).val()!= “”){
        consulta = $(“#idarea”).val();
        $.ajax({
        type: “POST”,
        url: “validarinterfaces.php”,
        data: “idarea=”+$(‘#idarea’).val(),
        success:function(r){
        //$(‘#msg’).html(data);
        if(r==1)
        {
        $(‘#msg’).html(“Si esta”);
        }
        else
        {
        $(‘#msg’).html(“Nada esta”);
        }
        }

        });

        }
        //alert(consulta);
        // $(‘#idarea’).val(”);
        });

        $(‘#xnom’).focus();
        })

        CODIGO PHP
        $idarea = $_POST[“idarea”];
        $obj = new cValidaciones();
        $temp = $obj->veriArea($idarea, $_SESSION[‘iddep’]);
        if($temp > 0)
        {
        // echo “Si esta”;
        echo 1;

        }
        else
        {
        // echo “No esta”;
        echo 0;

        }

        1. denker dice:

          Podrías encerrar el 1 entre comillas simples

          if(r=='1')

  7. freddy dice:

    GRACIAS AMIGO ME AYUDASTES EN MUCHO MI ERROR ERA QUEE STABA COLOCANDO CODIGO HTML EN EL ARCHIVO PHP Y ESO GENERABA ERRORES GRACIAS TODO FUNCIONA OK MUY BUEN APORTE

  8. Splax dice:

    Hola Ante todo gracias por compartir, estoy probando la función y realmente no se donde tengo el fallo, he probado a cambiar si el resultado es = 1, >1 y <1 entre otras, plasmo el código
    $(document).ready(function(){
    $('#nickname').focusout( function(){
    if($('#nickname').val()!= ""){
    $.ajax({
    type: "POST",
    data: "nickname="+$('#nickname').val(),
    beforeSend: function(){
    $('#msgUsuario').html(' verificando’);
    },
    success: function( respuesta ){
    if(respuesta == ‘1’)

    $(‘#msgUsuario’).html(”);
    else {
    $(‘#msgUsuario’).html(”);
    //alert(consulta);
    // $(‘#control’).val(”);
    }
    }
    });
    }
    });
    });

    CONEXIÓN A LA BBDD

    $nickname = $_POST[‘nickname’];

    mysql_select_db($database_conect_admin, $conect_admin);
    $query_USER = “SELECT nickname FROM usuario Where nickname=’$nickname'”;
    $USER = mysql_query($query_USER, $conect_admin) or die(mysql_error());
    $row_USER = mysql_fetch_assoc($USER);
    $USERE = mysql_num_rows($USER);
    if( $USERE->num_rows > 1){
    echo 1;
    }else{
    echo 0;
    };
    Resultado siempre disponible
    MUCHAS GRACIAS

    1. denker dice:

      Hola

      Tu codigo PHP esta confuso lo podrías reducir y quedaría así

      $nickname = $_POST['nickname'];
      mysql_select_db($database_conect_admin, $conect_admin);
      $query_USER = “SELECT nickname FROM usuario Where nickname=’$nickname’”;
      $USER = mysql_query($query_USER, $conect_admin) or die(mysql_error());
      $USERE = mysql_num_rows($USER);
      if( $USERE > 1)
      echo 1;
      }else{
      echo 0;
      };

      Aunque la extensión mysql ya esta obsoleta desde la versión 5.5.0 de PHP en su lugar se recomienda que utilices la extensión mysqli

      saludos

  9. fernando dice:

    Que tal, todo funciona muy bien, solo que no puedo hacer que funcione dando un enter sobre la caja de texto, me podrias ayudar?

    1. denker dice:

      Fernando, tienes que trabajar con el evento .keypress() y verificar que la tecla que se pulso sea el enter

      $("#nick").keypress(function(event) {
      if ( event.which == 13 ) {
      //codigo
      }

  10. miguel dice:

    Hola amigo muchas gracias mira yo quiero que si existe el usuario me diga que es correcto y que si no me diga que es incorrecto

    la cuestion es que siempre me dice que es incorrecto aun que el usuario exista en la base de datos
    este es mi codigo de jquery

    $(document).ready(function(){

    $(‘#usuario’).focusout( function(){
    if($(‘#usuario’).val()!= “”){
    $.ajax({
    type: “POST”,
    url: “validar_usuario.php”,
    data: “user=”+$(‘#usuario’).val(),
    beforeSend: function(){
    $(‘#msgUsuario’).html(‘ verificando’);
    },
    success: function( respuesta ){
    if(respuesta == ‘1’)
    $(‘#msgUsuario’).html(“Correcto”);
    else
    $(‘#msgUsuario’).html(“Incorrecto”);
    }
    });
    }
    });

    });

    este es mi codigo php que busca en la base de datos

    de antemano muchas gracias

    1. denker dice:

      Verifica con firebug que valor te esta regresando, para ver si el que falla es el codigo php. saludos

  11. Gerardo dice:

    Muy bueno y sencillo de entender. Gracias por compartir.
    Como critica constructiva, estaría muy bueno si pudieras pulir lo publicado originalmente y colocaras un link de demo.
    Gracias nuevamente.

  12. Jesueto dice:

    Hola! Por alguna razón siempre me sale No disponible, en qué me equivoqué? Gracias
    HTML:

    JQuery:
    $(document).on(“ready”, function (){
    $(‘#nick_u’).focusout( function(){
    if($(‘#nick_u’).val()!= “”){
    $.ajax({
    type: “POST”,
    url: “validarDispUser.php”,
    data: “nick=”+$(‘#nick_u’).val(),
    success: function( respuesta ){
    if(respuesta == ‘1’)
    $(‘#msgUsuario’).html(“Disponible”);
    else
    $(‘#msgUsuario’).html(“No Disponible”);
    }
    });
    }
    });
    });

    PHP:
    0)
    echo 0;
    else
    echo 1;
    ?>

    1. Jesueto dice:

      No le estaba pasando la variable del ajax nick si no el nombre del input como si estuviera dando submit .-.
      OMG…
      Voy de mal en peor D:

  13. Rivelino dice:

    Muy buena ayuda!!! Gracias.

    Aprovechando el tema y si tuvieras tiempo, me gustaria dar el mensaje en colores, por ejemplo si no esta disponible un warning_rojo o si esta disponible un verde! como lo aplico desde el jquey?

    1. denker dice:

      Hola, en la respuesta le puedes agregar una clase para que aplique el estilo que desees.

      $('#msgUsuario').html("Disponible");
      $('#msgUsuario').addClass('correcto');
      y
      $('#msgUsuario').html("No Disponible");
      $('#msgUsuario').addClass('warning');

  14. Giancarlo dice:

    Hola com podria hacerlo pero con PDO te agradeceria mucho si nos enseñas, gracias.

  15. Gerardo dice:

    Buenísimo y sencillo el ejemplo. Gracias por compartir. Necesitaría si sos tan amable de decirme como puedo hacer para que si el usuario se equivoca y vuelve a completar el INPUT se vuelva a consultar la disponibilidad del usuario. Gracias nuevamente.

  16. Neytor dice:

    Hola Amigo gran Post y muy Util, pero no se si se puede, en ves de llamar a la URL de un archivo.php, se podria hacer llamando a un metodo de ese archivo solamente. Por ejemplo si dentro de el archivo tengo una Clase Cliente y un metodo verificar cliente. como hago para llamar a ese metodo, por ajax.

  17. Jose dice:

    En que momento declaras la variable respuesta?

  18. Pablo dice:

    Muy buen post. Una consulta: ¿Como puedo bloquear para que no se mande el formulario si el username introducido no es válido?

    1. denker dice:

      El botón submit lo puedes cargar bloqueado y si te regresa 1 lo activas $(“#submit”).prop(‘disabled’, false);

  19. Confundido dice:

    Un pregunta, un poco obvia, pero no me está funcionando, que cabeceras de script debo colocar para que funcione este codigo???? ejemplo: etc etc.

    Gracias por su ayuda

    1. denker dice:

      ‹script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"›‹/script›
      y el codigo lo metes dentro de $(document).ready({});

  20. ESTEBAN dice:

    muchas gracias me fue de mucha utilidad

  21. JuanD dice:

    Hola amigo muchas gracias por tu aporte pero tengo inconvenientes no me captura el evento te muestro el codigo para que veas:
    Formulario HTML

    Placa del Vehículo

    Codigo JQuery

    $(document).on(“ready”, function(){
    var select=$(‘#placa’);
    select.focusout( function(){
    if(select.val()!= “”){
    $.ajax({
    type: “POST”,
    url: “validar_placa.php”,
    data: “placa=”+$(‘#placa’).val(),
    beforeSend: function(){
    $(‘#mensaje’).html(‘ verificando’);
    },
    success: function( respuesta ){
    if(respuesta == ‘1’)
    $(‘#mensaje’).html(“Disponible”);
    else
    $(‘#mensaje’).html(“No Disponible”);
    }
    });
    }
    });
    });

    Codigo de consulta

    <?php
    include("conexion.php");

    $placa = $_REQUEST['placa'];

    if(!empty($placa)) {
    validar_placa($placa);
    }

    function validar_placa($b) {
    $sql = pg_query("SELECT * FROM vehiculos WHERE placa = '$placa'");

    $contar = pg_num_rows($sql);

    if($contar == 0){
    echo "El vehiculo no existe.”;
    }else{
    echo “El vehiculo existe.”;
    }
    }
    ?>

    Estaria muy agradecido por tu ayuda…

  22. Ariel dice:

    Hola denker requiero de esta funcion con urgencia Please

    no me ejecuta le funcion??

    archivo prueba.php

    Documento sin título

    $(document).ready({
    $(‘#nick’).focusout( function(){
    if($(‘#nick’).val()!= “”){
    $.ajax({
    type: “POST”,
    url: “prueba2.php”,
    data: “nick=”+$(‘#nick’).val(),
    beforeSend: function(){
    $(‘#msgUsuario’).html(‘ verificando’);
    },
    success: function( respuesta ){
    if(respuesta == ‘1’)
    $(‘#msgUsuario’).html(“Disponible”);
    else
    $(‘#msgUsuario’).html(“No Disponible”);
    }
    });
    }
    });

    });

    Nick:

    Nombre:

    prueba2.php
    query($consulta);

    if( $result->num_rows > 0)
    echo 0;
    else
    echo 1;
    ?>

    Me ayudas porfa, Thanks!!!

  23. Guillermo Sandoval dice:

    Buenas, que tal muy buen articulo! Muchisimas gracias, con respecto a lo de agregar las clases para los a propiedades a los textos
    $(‘#msgUsuario’).html(“Disponible”);
    $(‘#msgUsuario’).addClass(‘correcto’);
    y
    $(‘#msgUsuario’).html(“No Disponible”);
    $(‘#msgUsuario’).addClass(‘warning’);
    agregue las clases a mi css externo y no funciona!
    Alguna idea?
    Gracias nuevamente
    Saludos

  24. Eleazar dice:

    Que tal buen dia tengo un problema siempre me dice que esta disponible cuando no es asi mi codigo php es el siguiente

    query($consulta);

    if( $result->num_rows > 0)
    echo 0;
    else
    echo 1;
    ?>

  25. Eleazar dice:

    Hola buen dia tengo un problema siempre me dice que esta disponible auqnue ya esten los campos mi codigo php es el siguiente

    query($consulta);

    if( $result->num_rows > 0)
    echo 0;
    else
    echo 1;
    ?>

    1. sun2012 dice:

      Tal vez tu consulta este mal, saludos.

  26. jhon james dice:

    Buen día, espero sirva mi aporte.

    He visto que muchos preguntan que al devolver el valor de la consulta, ya sea 0 o 1, siempre les muestra lo mismo, y no distingue los valores.

    Pues el error está en el Success de la función, el código debería quedar así:

    success: function( res ){
    if(res == 1){
    //alert(‘Este Codigo se Encuentra Registrado’);
    $(‘#Resultado’).html(“Registrado”);
    }
    if(res == 0){
    $(‘#Resultado’).html(“No Registrado”);
    }
    }

    Espero les sirva y sea de utilidad.

  27. alejo dice:

    Hola buen dia quisiera saber como hago que haga la verificacion mientras termino de digitar

  28. mary dice:

    Hola disculpa tengo un autocomplete y este script en la misma caja de texto pero como el evento se activa al dar click cuando esta autocompletando y selecciono un dato me muestra el msj de que no disponible por lo que quiesiera saber como hacer para que acepte los dos , no se si me di a entender

  29. batereylor89 dice:

    Muchas gracias, Me funcionó

Deja un comentario