Comprobar disponibilidad de nombre de usuario en vivo

Cuando queremos hacer un formulario de registro de usuarios o de elementos que deseamos que su nombre sea único y que no puede estar duplicado en la base de datos, podemos usar en nuestros campos de texto del formulario una validación para comprobar la disponibilidad o existencia del nombre en vivo.

Esto también se puede aplicar para la validación de emails únicos. También se podría comprobar en el momento si un email ya existe en la base de datos o cualquier dato que se te ocurra.

En el ejemplo que se ilustra asociado a esta entrada, vamos a ver un formulario donde el usuario puede indicar su nombre o nickname para registrarse o iniciar sesión en una página Web. Vamos a comprobar la disponibilidad del nombre de usuario en vivo utilizando la tecnología Ajax para enviar la petición al servidor sin necesidad de recargar la página.

Esto lo vamos a conseguir utilizando las siguientes tecnologías: HTML, jQuery, AJAX, PHP y MySQLi.

Código jQuery

En la cabecera de la página o dentro de la etiqueta <head> agregaremos la librería jQuery y el script que permite la validación en vivo de nuestro campo «username»:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
    $('#username').on('blur', function() {
        $('#result-username').html('<img src="images/loader.gif" />').fadeOut(1000);
 
        var username = $(this).val();		
        var dataString = 'username='+username;
 
        $.ajax({
            type: "POST",
            url: "check_username_availablity.php",
            data: dataString,
            success: function(data) {
                $('#result-username').fadeIn(1000).html(data);
            }
        });
    });              
});    
</script>

Este código también puede ser agregado en la parte de abajo de la página justo antes de la etiqueta de cierre </body>.

En este caso, estamos esperando a que se termine de escribir un nombre de usuario en nuestro campo de texto con identificador «username» y como estamos utilizando el evento «blur», en el momento de cambiar de campo será cuando se realice la validación del contenido del campo. Puedes utilizar «keyup» para realizar la validación por cada tecla que pulsa el usuario.

Cuando se ejecuta este evento, mostramos una imagen para indicar al usuario que se está cargando o buscando algo durante 1 segundo. La típica imagen de loading. Seguidamente realizamos una llamada Ajax enviándole el valor de nuestro campo de texto «username» para ejecutar el archivo «check_username_availablity.php» que se encarga de revisar si el nombre de usuario introducido existe en la base de datos.

Mediante el success del Ajax mostramos un error en caso de que el nombre de usuario exista o un mensaje de confirmación de usuario disponible.

Código PHP

El archivo PHP que se ejecuta en el servidor en la llamada Ajax contiene lo siguiente:

<?php 
require('config.php');
sleep(1);
if (isset($_POST)) {
    $username = (string)$_POST['username'];
 
    $result = $connexion->query(
        'SELECT * FROM users WHERE username = "'.strtolower($username).'"'
    );
 
    if ($result->num_rows > 0) {
        echo '<div class="alert alert-danger"><strong>Oh no!</strong> Nombre de usuario no disponible.</div>';
    } else {
        echo '<div class="alert alert-success"><strong>Enhorabuena!</strong> Usuario disponible.</div>';
    }
}

En este archivo estamos incluyendo el archivo «config.php» que se encarga de establecer la conexión con la base de datos utilizando MySQLi.

Si no sabes conectar con la base de datos utlizando MySQLi puedes darle un vistazo al siguiente tutorial -> Interactuar con una base de datos utilizando Mysqli.

Una vez se conecta con la base de datos, paramos la ejecución un segundo mediante la función sleep() para mantener el efecto de cargando y si hemos recibido datos, hacemos la consulta que retorna todos los datos del usuario en el caso de que existiera.

Este archivo retorna una cadena con el mensaje de error o confirmación que es procesado en el success del Ajax que hemos comentado antes.

Código HTML

 

 

 

 

El formulario que hay que agregar dentro del <body> de la página puede ser algo como lo siguiente:

<form action="#" method="post">
    <div class="form-group">
        <label for="username">Usuario</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="Introduce tu nombre...">
        <small class="form-text text-muted">Elige "jose" o "maria" siendo usuarios que ya existen en base de datos.</small><br/>
        <div id="result-username"></div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Escribe tu password aqui...">
    </div>	
</form>

Ver demo Descargar

Esta entrada ha sido editada el 01/11/2018.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (51 votos, promedio: 4,90 de 5)
Cargando…
Comparte en las redes sociales

136 respuestas a “Comprobar disponibilidad de nombre de usuario en vivo”

  1. Ulises Velazquez Juarez dice:

    Disculpa hay una manera de realizar este procedimiento sin usar PHP
    Es que lo quiero implementar en un sitio pero solamente uso jsp

  2. Luis Fernando dice:

    Que tal José muchas gracias por el aporte, quería saber como hacer para desactivar un botón en caso el usuario exista, este es el código, pero no me sale, queria saber si el problema esta en el php o en el mismo ajax:

    $.ajax({
    type: «POST»,
    url: «check_username_availablity.php»,
    data: dataString,
    success: function(data) {
    $(‘#Info’).fadeIn(1000).html(data);
    //alert(data);
    if (data == ‘1’) {
    $(‘input#boton’).attr(‘disabled’, ‘disabled’);
    $(‘input#password’).value(‘hola’);
    $(‘input#boton’).value(‘hola’);
    }
    }
    });

    En el PHP lo tengo así:

    if($contar == 0)
    echo ‘Usuario ya existente’;
    else
    echo ‘Disponible’;

    • Jose Aguilar dice:

      Hola,

      La implementación no es correcta. No se corresponde con lo que deseas. El PHP debería retornar un ‘1’ para que en este caso el botón se desactive.

      Saludos

  3. Paola dice:

    Buenismo, pero tengo una duda, ¿como hago para que el siguiente campo (en este caso contraseña) quede deshabilitado en caso de que el usuario ya exista?.
    Gracias por su pronta respuesta.

    • Jose Aguilar dice:

      Hola,

      Creo que puedes usar algo así en el success del ajax y quizá tengas que cambiar la respuesta ajax para que te retorne un 1 si el usuario existe y un 0 si el usuario no existe.

      Dentro del success hacer algo así:

      //si el usuario existe
      if (data == ‘1’) {
      $(‘#password’).attr(‘disabled’, ‘disabled’);
      }

      Saludos

  4. Ulises dice:

    amigo soy nuevo en esto, me interesó demasiado lo que expuso un usuario sobre como desactivar el boton en caso de que el usuario ya exista. Leyendo un poco sobre el «onBlur», no tiendo bien como es que fue implementado para verificar en que momento se debe desactivar el boton.
    Para hacer eso se tiene que insertar directamente en el archivo php ?¿
    0) // not available
    {
    echo ‘Usuario ya existente’;
    echo »
    $(‘input#id_button’).attr(‘disabled’, ‘disabled’);
    «;
    }
    else
    {
    echo ‘Disponible’;
    echo »
    $(‘input#id_button’).attr(enabled, enabled);
    «;
    $usuario = 2;
    }

    }?>
    algo asi? me podrias orientar porfavor c:

    • Jose Aguilar dice:

      Hola buenos días,

      Si necesitas desactivar un botón deberás hacerlo desde el javascript que hace la llamada al evento onblur. En el php no me parece correcto.

      Saludos

  5. Iran Júnior dice:

    Comprobar disponibilidad de nombre de usuario en vivo – Jose Aguilar Tava precisando de limpar uma lista de emails, e achei o site http://www.validadordeemails.com.br usei e limpei minhas listas de e-mail, realmente é muito bom, tem uns filtros avançados legais… Pra quem quiser retirar e-mails inválidos, uso e indico para meus amigos o site http://www.validadordeemails.com.br muito bom mesmo galera 🙂

  6. Michael Parra dice:

    Hola Jose, muchas gracias por tu grán aporte. Quisiera saber como deberia acomodarlo para PHP7 teniendo en cuenta que funciona con Mysqli. Lo implementé pero me aparece en el error_log:

    [22-May-2017 15:51:16 America/New_York] PHP Warning: mysqli_query() expects at least 2 parameters, 1 given in /home/prueccd/public_html/crm/form/check_email_availablity.php on line 7

  7. Raul Ortiz dice:

    Mi proyecto va super. Luego te lo comparto. Gracias

  8. Raul Ortiz dice:

    Jose, buenas noches. Disculpa Ya funciona perfecto. Fue un error mio, las instrucciones del javascript las puse dentro de un .
    Gracias. Funciona perfecto. Seguire con mi proyecto a ver como me queda. Gracias. Luego te lo comparto. Mil gracias.

  9. Raul Ortiz dice:

    Jose buen dia. Quedo perfecto en el input. Gracias. Mira que lo puse en otra pagina php, y no funciona. Lo unico diferente en esta pagina es que tiene dos formularios y ambos formularios funcionan bien hacen lo que tienen que hacer. Lo que quiero es validar un dato en un input en uno de los formularios. El tener dos formularios en un archivo php afecta que no funcione ?

    Gracias por tu ayuda. Gracias

  10. Raul Ortiz dice:

    Jose …. muchas gracias. Funciona perfecto. Ya lo acomode a mi necesidad. Funciona perfecto. Necesito ponerlo en un input no en una etiqueta div, como se haria. Gracias !!

    • Jose Aguilar dice:

      Hola, para ponerlo en un input deberás hacerlo así:

      En vez de:
      $(‘#Info’).fadeIn(1000).html(data);

      Deberas poner:
      $(‘#input_id’).val(data);

      Espero te sirva,
      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.